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

Button Requests

Rules

Pick Up

Don't see your button? Check the portfolio!

Kelly <a href="/~kiouri"><img src="http://i.imgur.com/AqjRVGj.gif" border="0"></a>

Fish <a href="/~Petticoat"><img src="http://i.imgur.com/SGcWE8S.gif" border="0"></a>

Skye <img src="http://i.imgur.com/f0HnvHL.gif" border="0">

Portfolio

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!

Creating Smooth and Vibrant-like Images
Soft Star Animation
Glow Across Animation

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