Welcome!

안녕하세요! That's Korean for "hello"! Welcome to Saranghae (by Sandy), a site that specializes in button-making. If you're in need of a spiffy little graphic for a site or occasion, check to see if requests are open; if they are, then send in a request form. 감사합니다, thank you for visiting!

For those that wonder, saranghae (사랑해) is Korean for I love you.

Updates

November 19th, 2013. 12:38 p.m. NST
Received 6 requests.
Requests are now closed.
To my requesters: I apologize, but requests will take awhile to be completed. My mouse is broken and I won't be able to replace it until this weekend (it's the right clicker that doesn't work, but wow you don't realize how important that part of the mouse is until it's gone).

November 17th, 2013.
Received 3 requests.

November 15th, 2013.
Oh, that update I made in the middle of the summer never happened... Well, button requests are open! I won't be completing requests as quickly as before, but I have about 3 weeks of classes left before I'm on my winter break! That and Thanksgiving break is the week after next, so I will definitely have some time to spare.

Button Requests

Rules

Please give me credit for the button I made for you! You can have the button link back to this site, a text credit under the button, or text credit placed in your credits section.
If you request a button, please use it! Refer to the next rule.
If you don't like the button I made for you, please don't hesitate to tell me! I'll happily fix what you don't like or remake your button.
I make buttons for any type of page, whether they be sites or guilds. However, I will not make a button for a button request site.
Did you read the rules? Include a sentence in the form about orange chicken, buffalo wings, or perhaps both!
There's no limit to how many buttons you can request from me. However, please know your limits!
I will choose the borders, animations, and fonts used for your button. If there's certain specifics that you want (such as a particular border or animation), then please include it in the form! If you want some options/examples, then feel free to look through my portfolio.
When filling out the form, please refrain from inserting full links! There's a glitch going around with neomails that if you insert a full url, the neomail cannot be viewed.

Note: I will only reply to your neomail for 3 reasons: I have rejected your request (an explanation will be given), I have a question about your request, or your request has been completed. However, I will not reply to your neomail if I have accepted your request.

Request

Waiting List

1. Hannah @ It's Raining Cupcakes.
2. Maddie @ Opaque.
3. Tiffany @ Demure.
4. Nina @ Solaris.
5. Grace @ Esquire.
6. Alia @ Everyday Quotes.
7. Rita @ Eternity.
8. Mirabelle @ Mirabelle's Storage.
9. Anna @ Anna's Portfolio.

Pick Up

Don't see your button? Check the portfolio!

Kelly
Fish
Skye

Portfolio

Only 30 buttons will be listed at a time.
If you're looking for the full button portfolio, click here.

Extras

Portfolio

Completed buttons. READ MORE.

Button Tips

Tips and explanations on what to do and what not to do when making buttons. READ MORE.

Photoshop Tutorials

Step-by-step tutorials on certain animations and techniques. READ MORE.

My Favorites

A compilation of buttons I like made by me. READ MORE.

Button Gallery

A compilation of buttons I like made by others. READ MORE.

Past Layouts

An archive of the layouts previously used for Saranghae. READ MORE.

Achievements

Saranghae's achievements (i.e. awards, rankings, etc.) UNDER CONSTRUCTION.

FAQ

Commonly asked questions and answers.READ MORE.

My Favorite Buttons

As a button maker, there are buttons I make that I don't like as much as the ones I've made previously. However, there are buttons I like so much I just want to keep it for myself! This section is to showcase my favorite buttons, the ones that I believe I have made very well.

Button Gallery

This section is dedicated to the buttons made recently by other button makers that I find extremely well made. It will be updated whenever needed.
Each button will link back to its respective maker's site.

Button Making Tips

Tip #1 - Strong Animations

Often I've seen buttons with beautiful animation, but there's always one problem: the animation is too strong. What I mean by strong is when the animation stands out too much, overpowering the image, text, or the whole button in general.


This is an example of a strong animation. The colors used for the text animation stand out far too much compared to the text's base color. Because of this, it looks unpleasing. You want the animation to be subtle yet noticeable. You don't want it to stand out too much, as it takes away from the button's purpose: to advertise a site.

When it comes to simple animations like text animation, use a color where there's only a slight difference to that of the base color. Instead of using very bright colors, I chose colors that were darker than the one used in the first button, yet still lighter than the base text.

Tip #2 - White Animations

Most of the time when people do any type of "glow" animation, they use the color white. I understand, as it's often the brightest color, and stands out most on top of a dark, or even light, image. However, it looks unappealing and most of the times draws too much attention.


When utilizing any animation similar to the glow animation, use a dark color. When the animation's layer is set on screen, then the lighter the color, the brighter the animation will be. In order to weaken the glow animation, use a darker color. With a dark color, you'll be able to read the text and also notice the color of the glow (which actually looks a lot nicer than some white glow).



For the button on the left, I used a white color for the animation. As you can see, it grabs too much attention and looks very unnatural. However, if you look at the second button, I used a color from the button itself. I then put that layer on screen and lowered the opacity. The glow animation blends in really well and you can actually see that it's a shade of brown and not just white!

Tip #3 - Text Borders

Placing a border around your text is one of the most important things when making a button. Not only does it help make the text legible but also places more emphasis on the text as well as gives the button more depth and color. For a person new to button-making, and designing in general, it's difficult to differentiate what colors to use and what colors not to use. Even I, having done this for several years, have difficulty every once in awhile!


The buttons above show poor choices in text borders. The colors used for both were just randomly taken from the button base, making the text stand out too much and overall unappealing.


Now these buttons are much better in comparison to the ones before! The trick is to use a darker color of the majority color of your button. For example, if your button base were a solid color of #BBBBBB, then the border should be #888888 or #777777. Another example would be that if your button base's majority color is #2C84C8, then the border should be #085B9B. As long as the color is darker than that of the majority and not too dark or too light, then it should be legible!

Tip #4 - White Text Borders

When making buttons, we have the option of using a white text border instead of a colored one. However, there are times when white borders should not be used.


You shouldn't use a white text border if the button is dark. My two buttons from way-back-when will be some examples. As you can see, there's too big of a contrast from the white and the dark buttons that it makes the text stand out too much, and therefore may most likely be very blinding. You may also notice how much more difficult it is to read the text on the button!


With the first button, the white border, again, contrasts too much from the overall dark button. In the second button, the text is much more legible as well as easier on the eyes.


I'm not saying that you shouldn't use white borders. It's perfectly fine to use white text borders as long as the button isn't a dark color! The above buttons are examples of when it's appropriate to use a white border.

Photoshop Tutorials

There tutorials are taught for Photoshop users. If you use other programs, feel free to look through them to try and incorporate the steps in your own ways!


Glow Across Animation

Before starting the steps, please have your button finished with editing. By following this tutorial step-by-step, it'll be easier to keep track of what step you're on.

By the end of this tutorial, this shall be your result:

Back | Go to the steps.

Step 1

On top of all of the other layers, create a new layer and name it glow.

Back | Next step

Step 2

Using a soft brush anywhere from 25px to 30px (feel free to experiment!), use the pen tool to create a diagonal stroke. Choose a color from your button (preferably the main color of the button, but a tad darker). Set the layer to screen.

Back | Next step

Step 3

Below the glow layer, create a new layer and fill it with black. Reselecting the glow layer, zoom in and create a 1px line on each side of the glow. This will help you count the amount of pixels you'll move in each animation frame.

Delete the black layer.

Back | Next step

Step 4

Open the action window and click on the "new file" button (shown in the image on the left) to create an action. The reason I advise you to do this is to save you time on this animation, as it takes quite awhile if you plan on using it a lot!

Back | Next step

Step 5

Selecting the glow layer, move it all the way to the left (or wherever you want the glow to start). Zoom in as close as you need to because you'll be counting pixels (fun)!

Back | Next step

Step 6

Open the animation -blocked- Create a new frame and move the glow layer anywhere from 3px to 5px to the right (or whatever direction you want it to go). The number you choose at the start will have to remain consistent, as you don't want the animation to be choppy! I chose to move it to the right by 4px.

With every new frame, move the glow to the right by whatever number you choose. Do this until the two white lines are out of sight.

Back | Next step

Step 7

Reopen the action window and click on the square next to the red circle to stop recording.

Back | Next step

Step 8

Zoom into the image to remove the white lines from the glow layer.

Back | Next step

Step 9

Select all of the frames in the animation window (a fast way to do this is selecting the first frame, then click shift and select the last frame) and change the frame duration anywhere from .5 s to .7 s (the more the number, the slower and choppier!)

Select the last frame and change the duration anywhere from 1 s to 2 s, or for however long you want the wait time between the animations to be.

Back | Next step

Step 10

Go back to the animation window and select the first frame. Then select the glow layer and lower the opacity to whatever you feel fits (don't let the glow be too overpowering!)

Back | Next step

End of Tutorial

This was my result. Hopefully something similar came out for you!

The reason for creating the action is to save you time from having to do all of these steps again! In the future, all you'll have to do is create another glow layer, move it to the left, and perform the action!

I hope you've learned from this tutorial!

Back | Back to Tutorial Page.

Soft Star Animation

Before starting the steps, please have your button be finished with editing. By following this tutorial step-by-step, it'll be a lot easier to keep track of what step you're on.

For this tutorial, I'll be using this button, and we'll be hoping for this result:

Back | Go to the steps.

Step 1

Before starting the process, I strongly recommend that you create a layer, fill it with black, and lower the opacity. This will help you spot where your dots are. However, throughout this tutorial, this black layer will not show. This is just for you!

Back | Next step

Step 2

Create a new layer and open the layer styles, then outer glow with these exact settings. (There's no need to change anything besides the color of the glow. Feel free to experiment with other colors!)

Back | Next step

Step 3

Now, zoom up to your picture. Make it close enough where you're comfortable and able to see the pixels at a reasonable size. Now click on your brush tool and use the hard round 1px brush. On the layer with the soft glow, use the brush in any spot.

If you look carefully, it's not that noticeable. But don't worry, we're getting somewhere! This is only the first part. Duplicate that exact layer (ctrl+j) and go over the same spot, but instead with a hard round 2px brush. You'll get something similar to the right image, which is a lot more noticeable than the first.

Back | Next step

Step 4

As you did in the last step, duplicate the same layer and go over the same spot, this time with a hard round 3px brush. You'll receive the result of the picture on the left. Once finishing these steps, you should have 3 layers as shown on the right picture.

Back | Next step

Step 5

Okay, delete everything that was shown to you in the past few steps. That's only for if you want one star to be animated every few frames. If you want multiple stars to be animated every few frames, then do the exact same thing you did in the past few steps except make multiple dots on one layer, as shown in the pictures above.

By the time you start animating, you should have at least 3 sets of different layers (1 set = steps 2-5 done once).

Back | Next step

Step 6

Open your animation window and change the frame duration anywhere from .1 seconds to .2 seconds. (Later on, you'll probably be doing these steps differently or adding in more layers. But for now, I strongly recommend .15 seconds, despite what the pictures say.) Before animating, make sure that all of your layers are invisible.

Back | Next step

Step 7

On the very first frame, make the first layer in your first set visible.

Add a new frame. Make the second layer of your first set visible.

Add a new frame. Make the third layer of your first set visible, but the first layer invisible.

Add a new frame. Make the third layer invisible, but the first layer visible.

Add a new frame. Make the second layer invisible.

Add a new frame. Make your first layer invisible. You are now done with 1 whole set!

Back | Next step

Step 8

Repeat the last step with your remaining sets.

Back | Next step

End of Tutorial

Your animation should now look something like this (although not exact, obviously). Hope you've learned quite a bit. Feel free to use this as a guide and create your own steps to doing this animation.

Back | Back to Tutorial Page.

How to Create Smooth-like Images

First, select the image that you will be using. I will be using this image.

Back | Go to the steps.

Step 1

Have your image open in Photoshop. Duplicate the image once, so you will then have two layers of the same image.

Back | Next step

Step 2

Select the duplicated layer. Set the layer onto overlay, which will give you the result of the image on the right.

Previous step | Next step

Step 3

With the same layer used before, go to filters - blur - gaussian blur. Set the radius to what you think looks best. I often make the radius to 2 for smaller images and 3 for larger images. If it's for a button, I'd make it 1.

Previous step | Next step

Step 4

Now compare the two images, the one on the left being before and the one on the right being after. Major difference, isn't it? And it looks very nice, as well! But depending on the image, it sometimes looks too blurred. If that happens to you, such as for this image, continue the next step.

Previous step | Next step

Step 5

Select the original layer of the image, which should be the bottom layer. Go to filter - sharpen - sharpen. Just do it once.

Previous step | Next step

End of Tutorial

Now compare the image used to your final product. Big difference, isn't it?
I hope I've helped you out!

Previous step | Back to Tutorial Page.

FAQ

Q. Will you make an exception with requests even while your requests are closed?
A. No exceptions will ever be made while requests are closed! You'll have to patiently wait for requests to open before you can request.

Q. Your requests are closed, but I saw that your waiting list is empty/has open spaces! Can I still request?
A. You cannot request while requests are closed. Although the waiting list is empty, they're closed because I'll be busy with something else. As for open spaces, I want to clear the waiting list before I open requests again.

Q. I sent in a request and forgot to include the thing to show that I read the rules, so I sent you another neomail. Is that alright?
A. For me, that's perfectly fine. Although I read the rules all the time when I request for things, I forgot to include it, as well! As long as I don't have to tell you that you forgot/didn't read the rules, then you're safe.

Q. You neomail'd me saying that I didn't read the rules. So I sent you the neomail with what I had to include in the form.
A. If I had to neomail you to tell you that you didn't include it in the form, then I will reject your request. For me to remind you will make me assume that you didn't read the rules. (I'm very thankful to those that've said sorry!)

Q. Will you code a layout for me?
A. No, I will not code a layout for you. However, I will help with certain things you might have trouble with. Just send me a neomail!

Q. Can I use your coding to code my own layout?
A. Please don't do this! You cannot use my coding and use it for your own layout!

Achievements

A place to keep track of Saranghae's achievements. Currently under construction!

Past Layouts


v1. Negg Forest
Hours spent: N/A.
Time used: 1/9/11 - 1/17/11.

v2. Dreamy Faerieland
Hours spent: 4 hours.
Time used: 1/17/11 - 2/4/11.

v3. It's a Love Thing
Hours spent: 4 hours.
Time used: 2/4/11 - 3/8/11.

v4. Birthday Bash
Hours spent: 5 hours.
Time used: 3/8/11 - 4/16/11.

v5. Lost
Hours spent: 3 hours.
Time used: 4/16/11 - 7/4/11.

v6. Final Return
Hours spent: 4-5 hours.
Time used: 7/4/11 - ?.

v7. Early Winter
Hours spent: 4-5 hours.
Time used: ? - 1/25/12.

v8. Floating Through the Mountains
Hours spent: 3 hours.
Time used: 1/25/12 - 8/30/12.

v9. Altadorian Sun
Hours spent: 5 hours.
Time used: 8/30/12 - 11/11/12.

v10. Counting Sheep
Hours spent: 6 hours.
Time used: 11/11/12 - 4/13/12.

Sitely

Link Back

Affiliates

Affiliate requests are closed.

Listers

 Soroptimist Directory
 Little Black Book
 Angel's Directory
 One Love Directory
 Oh!
 Masked
 Listed me? Neomail me here.
 Dragon's Lair
 The Shelf
 Pixie Dust
 Smiley Central
 Lacuna Directory
 Fireflies
 Clockwork

Credits

Layout created and coded by cyndikins.
Textures used from Details.
Bullets, request sign, and counter base from Bedazzled.
Backgrounds used in textareas from 49 Days.
Inspiration to start making buttons from Buttoness.
Many thanks to those that keep me going! You guys are the best!

v.11 // The Healing Springs
Saranghae © cyndikins.

Since January 9th, 2011.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions