Create a grungy ad in Photoshop CS4

If you feel like you have a good eye for design, then you might find yourself with the responsibility of putting together materials for your websites or magazines. There may be times that you want to create your own banners and advertisements, but not know where to start. In this tutorial, we'll look at how to create an ad using Adobe Photoshop CS4.

First, open Photoshop and the files you want to use in your ad. I always use stock photos for my designs; I've chosen to use one from MorgueFile. Once you have chosen your photo, make any size adjustments (by pressing Ctrl + Alt + I) or cropping (by choosing the crop tool from the Tools panel on the left hand side of the workspace) you need before you get started. Once you have that done, you should create a layer from the background by going to the top bar and clicking Layer then New then Layer from Background.



Next, I wanted to change the colors, so I started by adding a black and white adjustment layer. To do this, go to the top bar and click Layer, New Adjustment Layer, then Black & White.



Go to the Adjustments panel on the right hand side of the workspace. Play with the color settings to make different colors darker or lighter. I used the following settings: Reds are 75, Yellows are - 17, Greens are 60, Cyans are 36, Blues are 17, and Magentas are -127.



I wanted to add some color to it to make it kind of pop, so I decided to add a gradient that fit the shadows and highlights of the photo. To do this, click on Layer, New Adjustment Layer, and then Gradient Map.



Double click the gradient preview bar in the Adjustments panel to bring up the gradient map dialogue box. Here, you can click on the stops (the tabs along the bottom of the gradient) to change the colors. Double click on the stop under the black half of the gradient and change the color to something like #230858, which is a dark purple. Then click on the stop under the white half of the gradient and change the color to something like #fbbd8b, which is a yellow-orange. Finally, you can add a stop in the middle by clicking under the gradient preview bar for an intermediate color. I've chosen #60c0a1, which is a blue-green.



The colors are a little too bright, so to tone it down, we can turn the opacity down so more of the black and white shows through and mutes it. To do this, navigate to the Layers panel and click on the opacity dropdown. You can make yours whatever value you feel looks best. I've chosen to make mine 65%.



I like to keep my layers as organized as possible when I know I'm going to have a lot of layers, so I decided to create a group to keep the adjustment layers in. To do this, go to the top bar and click Layer, then New, then Group. When the dialogue box pops up, you can assign a name and even a color to the group. I've named mine 'Colorize layers.' Once you have the group created, drag the layers you want to include on top of the group. You can collapse the contents or show them by clicking on the arrow next to the folder.



Now, open a texture you'd like to use. There are many free textures available online; I've chosen to use a chalkboard-like texture from Grunge Textures. You can get the smallest one for free. Once you've opened it, press Ctrl + A to select it and then copy it and paste it onto your other document. You may need to adjust the size; to do this, press Ctrl + T to transform it. While holding down the Shift key, drag one of the corners either out or in to make it the right size, then click the checkmark at the top of the workspace.



We're going to cut some pixels out of the texture, so it's a good idea to make a duplicate layer just in case. To do this, go to the top bar and click Layer then Duplicate layer. Once you've done that, go to the Layers panel and click on the eye symbol next to the duplicate layer to hide it. It's only there so if you don't like what you've done, you can easily go back.



Switch back to the first texture layer and turn the opacity down to 60%. This is so you'll be able to see the other picture and know where to cut pixels. Then, select the rectangular marquee tool from the Tools panel (it may be beneath another marquee tool, in which case, you can click on the black arrow at the corner of the tool button for more options). Change the feathering to something like 5 px to give it a nice, soft edge, then draw a selection around the area you want to cut. And, once you are satisfied, you can press enter.



Group the grunge texture layers by clicking Layer, New, then Group. Make sure to drag the layers onto the group to include them. Then, open up a web browser and go to your favorite search engine to find free paint splatter brushes. There are many well-made resources like this that you can find online; choose a set that best suits you and download it. Then, select the brush in Photoshop (you may need to open the brushes window to see it, in which case you should click Window then Brushes). Choose a large size and a color (I've made mine 1004 px in white). Create a new layer by clicking Layer, New, then Layer, and click on the left corner of the document (or anywhere you think looks best).



Using the same brush as before, change the color to something like #cd34df (a hot pink) and create a new layer. Click slightly up and to the left of the first paint splatter, so the new one is mostly on top of it. Then, making sure the new paint splatter layer is selected, go to the bottom of the layers panel and click the fx. Go up to Blending options and, once the dialogue box pops up, click on Stroke. Change the size to 1 px to give it a more subtle outline.



Now select the white paint splatter layer and click on the fx at the bottom of the layers panel again. Choose Blending options and click on Drop Shadow. You can play with the settings to see what you like most; I've chosen to change the angle to 150 degrees, the spread to 3, and the distance to 8. I've also changed the contour to Cone - Inverted.



Create a new layer and use a different paint splatter brush (something softer and more like spray paint) to lightly brush white around the bottom left corner and one or two of the sides. Just make sure to be subtle about it. Change the opacity of the spray paint layer to 80% to make it more subtle. Once you're done, make sure you group the paint splatter layers.



Go back to your web browser to find a suitable grunge text. Again, there are many free fonts available. I've chosen to use the grunge font Base 02. Once you've downloaded it, extracted the files, and installed it, click the text tool on the Tools panel and use the drop down along the top bar to choose the font you installed (if you don't see it on the list, you may need to save what you've done so far in PSD format and then restart Photoshop). Also choose a color and a font size - I've made mine 80 pt and white. Drag the text box and then type your text; you can always use the move tool to adjust its placement.



Next, click on the fx at the bottom of the Layers panel, then Blending options. Click on Stroke and change the size to 1 px, so it will have that same, subtle effect and be legible without being overwhelming.



I also wanted to add a drop shadow, so click on Drop Shadow and leave the current settings (just make sure the angle is 150 degrees). The only thing we need to change is the contour, which I've changed to be Ring - Double.



Click on the text tool again and change the font size to 36 pt. Then drag a second text box near the model's face; this draws attention to the text. Type in your text and make paragraph breaks wherever you feel is appropriate. You can also use the move tool to adjust its placement.



Change the font size to 80 pt and the font color to something like #cd34df. Making the font a different color will draw attention to it and make it pop - something you want especially if you're calling attention to a sale. Type in the text; you may find that the lettering is too far apart and the gap is too noticeable. To fix it, we can change the kerning. Click on Window at the top bar and make sure that the Character panel is visible.



Put the cursor to the left of the gap and then click on the kerning arrow in the Characters panel (it looks like an A and a V with two arrows pointing horizontally). Change the value to something like -100, then repeat for the right side of the gap.



Use the move tool to adjust the placement of the lettering until you're satisfied and group the text layers. Then save your work as a PSD and also as a JPEG for your website. To optimize it for the web, click on File then Save for Web & Devices. This will pull up the Save for Web & Devices dialogue box; choose JPEG from the dropdown and leave the default settings.

Now you know how to create an ad or banner for your website using Photoshop CS4. The techniques discussed in this tutorial can be applied to many different designs and ads. If you want additional help with designs, however, call a graphic or web designer.

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

Brassy metal text effect in Photoshop CS4

When it comes to creating decorative effects, Photoshop is a wonderful tool to use. Graphics and decorative text are a snap; there's no limit to how you can customize things. In this tutorial, we're going to look at how to create a brassy metal finish for text in Adobe Photoshop CS4.

First, open Photoshop and create a new document by clicking File then New. You can make your canvas any size, but I've chosen to make mine 500 px by 500 px for visibility purposes. I've also chosen to make my canvas background color my current selected background color. In order to change the background color to a custom color, click on the second color swatch and use the color picker to change it.

Next, click on the text tool on the Tools panel on the left hand side of the workspace. Use the drop down to select a text - I've chosen to use the serif font Century. Then choose your font size, weight, color, and alignment. For now, I've chosen to make my font 70 pt in white.



Navigate to the bottom of the Layers panel on the right hand side of the screen, then click on the fx icon. A list of options will come up; choose Blending Options. Once the dialogue box pops up, click on Gradient Overlay. The gradient will automatically be black and white, so to change the colors, double click the gradient preview bar in the dialogue box. Then, when the second gradient dialogue box pops up, double click the tab stops on the bottom of the gradient and use the color picker to choose a dark brown. Do the same thing for the stop at the far right, but this time, choose a light yellow.



Create two new intermediate stops by clicking beneath the gradient bar. Choose a light yellow and a dark brown for them, making sure the colors alternate.



Click on Bevel and Emboss. Here, I've changed the depth to 150%, the size to 3 px, the angle to 90 degrees, and the altitude to 0. I've also changed the color of the highlight to a light yellow, the highlight mode to screen, and the shadow to normal. You can play with the settings until you're satisfied with the way it looks; the best way to customize and learn customization is to play with the settings instead of follow set values.



This final step is optional and up to your personal preference and the font you've chosen, but I've decided to add a stroke. If you want to do this, click on Stroke and change the size to 1 px so it won't be too overwhelming - we want a subtle effect. For the fill type, choose gradient, then click on the gradient preview bar to choose a dark brown and a light yellow color just like before. You should try to make the colors lighter or darker than the ones in the text fill, just to emphasize the outline.



Unless you want to add a drop shadow or play with any of the other layer effects, you're done! Creating decorative text for banners and graphics is easy and it doesn't take much time. The more you play with Photoshop, the more you'll learn and the easier it'll become.

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

How to create a download button in Photoshop CS4

In past tutorials, we've already looked at how to create buttons using Photoshop. However, you might want to go past the basics and learn how to incorporate icons into your button designs. You might also want more practice creating buttons in Photoshop. So in this tutorial, we're going to look at how to create a download button using Adobe Photoshop CS4.

First, start Photoshop and click File then New. When the dialogue box pops up, enter the values 220 px for width and 110 px for height. Make sure that the background is set to transparent. When the new document opens, find the shape tool on the left hand side of the workspace on the Tools panel. Click the little black arrow at the corner to reveal more options. For this tutorial, we want to choose the rounded rectangle shape tool.



If you want your button to be a solid color, then choose your color from the color swatch now. However, in this tutorial, I've decided to give my shape a gradient so I'm leaving the default colors. Drag the rounded rectangle shape tool to fill most of the canvas.



Now click on the foreground color swatch and use the color picker to choose a color. I've chosen to use a blue-green (hexadecimal value #11645D). Once you're done picking a foreground color, choose a background color of the same hue by clicking on the background color swatch and using the eyedropper tool to select from the foreground color swatch, then move the color picker up to a lighter shade (in this case, hexadecimal value #27D9CA).



Now to add a gradient, navigate to the bottom right hand of the workspace in the Layers panel. Click on the fx and then Blending Options.



When the dialogue box pops up, click on Gradient Overlay. The default gradient is black and white, but we want to use our foreground and background colors. Click on the black arrow next to the gradient preview and select the first gradient on the list (which uses the foreground and background colors).



Next, click on Stroke near the bottom of the dialogue box. Change the size to 1 px so it will give it a subtler effect and change the position to Inside to put the stroke inside the shape (so it'll outline the corners more precisely). Then use the color swatch to pick a color other than black. Because we want the stroke to blend in with the existing colors a little better, use the eyedropper tool to choose the darkest blue-green on the gradient and then move the color picker down to make it even darker (in this case, the hexadecimal value is #0A3935).



Here, let's add an inner glow to give it a little more definition. Click on the color swatch to change the color to white. I wanted the inner glow to be a little more visible and stand out more, so I changed the Technique to Precise.



We want to add some gloss to our button, so we need to create a new layer. To do this, go to the top bar and click on Layer then New then Layer.



Find the shape tool on the Tools panel on the left hand side of the workspace. Click on the little black arrow at the corner for more options, then select the rectangle shape tool. Next, click on the color swatch at the bottom of the Tools panel and use the color picker to choose white. Drag a box near the top of the button. How big it is depends on personal preference.



Navigate to the Layers panel on the right hand side of the workspace. At the top of the panel, there is a drop down for opacity. Type in the value or use the slider to change the value in order to make the white box translucent and give the button a nice gloss finish.



At this point, we want to add an arrow icon to our button. You can make one or you can use an already existing one. We're going to download an already existing arrow icon, so go to a free icon website such as www.iconfinder.com and type the search term in.

Find an arrow icon that you want to use and click on it. On Icon Finder, you usually have the option to choose one of several sizes. Choose a smaller size (such as 48 x 48 px or 32 x 32 px) and download it. Once you've downloaded it, click File then Open and navigate to the Downloads folder or the folder where you saved it. Open the file and press Ctrl + A to select the icon and then Ctrl + C to copy it. Switch back over to the other tab where you have your button and press Ctrl + V to paste it.

You can leave the arrow as it is if you prefer, but I'd like to turn it pointing down to indicate a download. To do this, click on Edit then Transform then Rotate 90 CW.



This step is optional and depends on the icon you've chosen, but I don't like the way the gloss looks here and want to move it to the other side. To do this, click on Edit then Transform then Flip Horizontal. Then use the move tool at the top of the Tools panel to drag or nudge the arrow down to the bottom of the button.



In this case, the icon still looks a little big so I want to scale it down. To change the size of the icon, make sure the icon's layer is selected then click Edit then Transform then Scale. Use the bounding box handles to change the size; be sure to hold down the Shift key while doing so in order to keep it proportional. Once you're finished, use the move tool again to adjust the placement.



I want to add some definition to my icon, so I chose to add a layer style. Go to the bottom of the Layers panel on the right hand side of the workspace and click on the fx, then Blending Options. From there, choose Bevel and Emboss and use the Style drop down to choose Pillow Emboss. I've changed the size to 1 px to thin the effect and softened it by 5 px. I've also changed the gloss contour to Ring.



We're almost done; we just need to add some text. Click on the text tool in the Tools panel and use the font drop down to choose a font family (I've left mine on Arial). Change the size of the font to one that suits you (I've chosen 26 and then 27 pt later), a font weight (I've chosen strong), the alignment (I centered my text), and a font color (I left mine black). Type Download Now into the text box.



Now let's finish up by adding a layer style to the text to make it more legible. Again, navigate to the bottom of the Layers panel and click on fx, then Blending Options. Choose Inner Glow and click on the color swatch to change the color to white.



At this point, you're ready to save. Click File then Save for Web & Devices. Once the dialogue box pops up, use the drop down to choose a PNG or GIF option (so the background will retain its transparency). Then give it a name and navigate to the folder you'd like to save it in. And that's it!

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

Create stunning neon glow text in Photoshop CS4

When creating banners and other image elements for your webpages, you have complete freedom when it comes to designing text. Using Photoshop, you can create all sorts of effects. Today we're going to look at how to create a neon glowing effect in Photoshop CS4.

Start by opening Photoshop and creating a new document. For this project, we want a dark background so the text stands out more, so click on the second color swatch on the Tools panel on the left side of the workspace. Make sure to change the color to black (#000000 in hexadecimal). Then click File and New. Make sure the canvas color is set for the background color, and set the size to something like 500 px by 500 px.



When the document opens, click on the Text tool on the Tools panel. Use the font drop down to choose a text. Generally, a neon glow looks nice on a thin, sans serif font; for this tutorial, I've downloaded a free font called Steiner. Change the font size to something large and change the color to white.



Now create a duplicate layer. To do this, click on Layer then Duplicate Layer. Once the layer is created, go to the Layers panel and uncheck the box with the eye in it to hide the duplicate layer. We'll come back to it later.



Go back to the first text layer, then click on the color swatch on the Tools panel. Choose the color you want the glow to be. In my case, I've chosen a blue-green.



Next, we want to add some styles to our layers, so navigate to the bottom of the Layers panel and click on fx, then Blending Options.



The Layer Style dialogue box will pop up. Click on Color Overlay and then click the color swatch. Use the eye dropper tool to choose the color in the color swatch on your Tools panel.



Since this is going to be our glow layer, we need to blur the text to give it that nice, fuzzy look. Go to the top bar and click on Filter, Blur, then Gaussian Blur. A box will pop up telling you the layer has to be rasterized; just click OK. For different fonts, the size of the blur differs, but for this font I've chosen to change the value to 5.0.



Now click on the checkbox next to the duplicate layer to unhide it. Once you've done that, you might want to make the text a little smaller to bring out more glow from behind it. To do this, click on Edit, Transform, then Scale. Hold down Shift while dragging the corners of the bounding box to make it proportional. Just make it a little smaller - not much, though. Then use the arrow keys to nudge it into place in front of the glow.



Once again, navigate to the bottom of the Layers panel and click on fx, then Blending Options. This time, when the box pops up, look for the Advanced Blending options. Change the fill opacity to 0%.



Click on Outer Glow and change the blend mode to Color Dodge. Color Dodge will allow you to take a given color and make it look brighter. Once you've done that, change the opacity to 50% so it won't be completely white, then change the color to white.



Next, click on color overlay and then the color swatch. Change the color to white to give it that white hot middle. Now we've created beautiful neon glow text that can be used anywhere you'd like.



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