When changes are made to a website, it is inevitable that you will have to edit images as well as text content. When you have the editable file that you created, this is very easy to do. However, when you want to make changes to an already existing button and you don't have the editable file, it can be a little trickier, yet still doable. In this tutorial, we will take an existing file and use Photoshop to add a gradient and change the color of the button.
First, navigate to Photoshop on your computer and open the program. Once the program has started, click File, then New. A dialogue box will pop up asking you to enter the dimensions of the document and to specify other factors, including background color. For now, leave the dimensions given and choose Transparent for the color. This way, your button won't be surrounded by the color of your background when you put it on your website.
Next, click File, then Open to pull up the button you want to edit. Navigate to the folder where you've saved your button file. It will open your file in a new tab.
You want to copy your button and paste it in your new document, so click on Select and choose the option All to select your button. I prefer keyboard shortcuts, though, so you can also press Ctrl + A to get the same effect.
Next, either click Edit and Copy or press Ctrl + C to copy your button. Once you do that, you can switch to the tab of your new document and click Edit + Paste or press Ctrl + V.
Now we need to create a new layer so we can add a gradient without filling the entire document. To do this, you can click Layer + New + Layer at the top bar, or you can navigate to the right Layers pane in the workspace and go to the bottom. There, you will see a list of options starting with what looks like a chain link and fx. The second to last icon looks like a notepad of paper; you can click on that to create a new layer above the selected layer.
If you've created a new layer using the Layer drop-down from the top bar, a dialogue box asking you to name your layer will pop up. You can name the layer if you'd like or leave it blank. In this case, what you do want to do is check the option to use the previous layer to create a clipping mask. If you've created a layer using the notepad icon in the Layers pane, then you can create a clipping mask by hovering your pointer between the layers and holding down Alt, then clicking. Creating a clipping mask links the layers so when you fill the second layer with a color or gradient, it will only fill the area of the shape in the previous layer.
Now that we've created our clipping mask, we should make sure that the second layer is selected before moving on to the next task. Here, navigate to the tools panel at the left side of the workspace and click on the little black arrow at the corner of the paint bucket tool. This will pull up additional options; the gradient tool is under the paint bucket.
Click on the first paint swatch at the bottom of the tools panel to choose your foreground color. You can leave your background swatch white unless you want to choose a different color to gradate into. You can use the color picker box to choose a color visually, or you can type the hexadecimal value in.
Next, click and drag the gradient tool line down the screen where you want it. The button will change color, but it looks a little flat now so we should add some layer styles to make it look more 3D. To do this, navigate to the bottom of the Layers panel on the right side of the workspace and click on the fx. You can choose any of the predefined styles you'd like, but if you want more control over how it appears, you should choose Blending Options.
The Layer Style dialogue box will pop up. Here, you can click on any of the styles and get additional options for how they are displayed. In this case, we're going to start with a drop shadow to make the button look like it's floating. Click on Drop Shadow and then customize your options. In this instance, I have changed the size of the shadow and the distance, which means that I changed how far the shadow comes from the button.
After choosing drop shadow settings, you can move on to the next style. Here, I've also added an inner glow so it looks like the light is facing the button straight on and so the highlight will go all around the interior line of the button. This gives it a more defined shape. You can change the options here too, such as the opacity, the color, and the size. I've left the default settings except for the color, which I changed to pure white.
It's looking better, but it's still looking a bit flat, so to round it up I've chosen the Bevel and Emboss option. This bevels the edges to give it a more 3D appearance. You can change the options here, too, including the angle of the bevel and the size. I've chosen to make the size a bit bigger than the default settings and soften the edges so it will appear more rounded instead of hard chiseled, which would give it a more harsh rectangular appearance.
Finally, I've added a stroke to outline the button. This helps define the outer shape more and gives it a nice, clean edge. I've changed the pixel size to 1 px so it's subtler but still effective, and I've chosen a darker purple as the color so it defines the shape without sticking out like a sore thumb.
The button is almost done, but users won't know what it does without text prompting them. In order to add text to the button, click on the text tool in the tools panel on the left side of the workspace. Along the top strip, you'll see some options, including font, font type (such as bold, narrow, etc), font size, alignment, and color. Here, I've chosen Arial as the font from the drop down and changed the color to white.
Click or drag the outline of the text box anywhere you'd like on the button. Type the name of the button or the action you want the user to complete.
Next, you want to align your text or center it. To do this, click on the move tool in the Tools panel on the top left side of the workspace. You can drag the text or press the arrow keys to arrange it where you want.
We're almost done. At this point, you don't want your file or background to be too big, so we have some cropping to do. Click on the crop tool in the Tools panel on the left side of the workspace. Then you can drag your box around the area you want to keep. You can always use the arrow keys to nudge the box a little if you're not happy with the selection or you can click the circle and crossbar icon at the top bar and make another selection. Once you're happy with your selection, you can hit Enter or click the arrow at the top bar.
Now we're done and ready to save it. You can save it under any file extension you'd like, but it's best to save it in a format for web output. This ensures that the picture is rendered well in optimal loading time. To save your file, click one File, then choose Save for Web & Devices from the drop down menu.
The Save for Web & Devices dialogue box will pop up. From here, you can choose your options, such as what format you want to save it in. In this case, I've chosen to save it as a PNG-24 so the background will remain transparent instead of white. Other than that, you can leave the default settings or change them according to your liking.
Once you've done that, another dialogue box will pop up where you can give it a name and navigate to the folder you want to save your file in. After that, you're done and your button is ready to upload and use.
Remember, this is just one way out of many that you can edit a button. Once you become more familiar with and comfortable with Photoshop, you can develop your own style of creating and editing buttons.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
No comments:
Post a Comment