How to create snow in Photoshop CS4

It's officially winter, and though the holiday season is behind us, you may still want to add spice to your seasonal pictures. Here in the South, snow isn't as frequent and when it does happen, you might not have your camera to capture that magical moment. However, you'll still be able to dress up your photograph and add snow in later. In this tutorial, we're going to look at how to create falling snow in Photoshop CS4.

First, open the picture you want to use in Photoshop. I'm using a stock photo of snow on the ground from MorgueFile. Once you've opened the picture, find the color swatches at the bottom left of the workspace in the Tools panel. Click on the first one and use the color picker to change the color to white. Then select the brush tool from the Tools panel and navigate to the top bar along the workspace. Change the brush tip size to 5 px and the hardness to 0%. Also find the opacity dropdown next to the brush mode dropdown and change it to 55%.



We need to customize the brush a little more, so go to the top bar and click on Window. From the list, choose Brushes so the Brushes window will show.



Click on Brush Tip Shape in the Brushes window and look at the options. Go to the bottom of the window where it says Spacing. Change the spacing to a higher number, such as 386%, to break up the continuous line into individual dots.



Now click on Scattering to select the checkbox and scatter the dots. Make sure the checkbox for both axes is selected and move the scatter slider to 1000%. Make sure the count is set to 1 and the count jitter to 100%.



It's time to create a new layer so we won't mess up the background if we don't like the outcome. Go to the top bar and click on Layer then New then Layer.



Now take the brush tool and start making diagonal strokes in the direction you want the wind to be blowing. Just give it a very slight angle to make it realistic. Brush over the whole picture and then go back over it with curly-cue motions to give it more body. If you need to, you can duplicate the layer by pressing Ctrl + J and then use the move tool to make more snowflakes.



At this point, we're almost done but we need to make the snow more realistic and make it look like it's in motion. Go to the top bar and click on Filter, then Blur, then Motion Blur.



When the Motion Blur dialogue box comes up, set the angle of the blur to whatever you'd like; I've set mine to 45 degrees. You should also set the distance relatively low (I've chosen 8 px). Don't go lower than 7 px or it won't look realistic.



At this point, we're done! Creating a snowy effect isn't hard to do - and it can make your seasonal photographs or cards look all the nicer.



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

Reinvent your website for the new year

A new year means a new opportunity - this could be your chance to clean up your site, tie up loose ends, and start over fresh. Although it's not a requirement, many people use the new year as a reason to update their site and make a change. So if you're looking to get your website up to speed for the next year, here are a few things you can do.

Check your competition. The first thing you should do is make a list of your competitors and check their websites. Look at what sort of changes they've made over the year (or since you last checked). See if your competition has added anything, changed, or has remained relatively static. Even if your competitors have not changed their sites much, you should be aware of what's going on in your industry - and what you can do to stay a step ahead.

Review your website. Once you've made note of the things your competitors have done, then you need to take a look at your own website. Ask yourself if there are any features your competition has that would be beneficial for you to add too - if you're lacking anything that could cost you a customer. Make changes as needed by updating information and yearly numbers, getting rid of things that only applied to the year before (such as specials and give-aways), and adding features that you think could benefit your users and make their experience easier. Sometimes this means a change in design; you may also find you need to add or reorder pages for clarity's sake. It is also a good time to give your site a thorough usability test and check to make sure it is compatible with the latest technology (particularly mobile technology, which Forbes.com reports has risen 117.8% over the past year).

Try something new. A new year is the perfect time to roll out a new feature, hold a contest, or send out a newsletter. Now's the time to get started on any new practices you've learned about and would like to try. Whether you want to create a new line of products or sign up for Twitter, you should get started now to make the most of your new strategy over the following year. The least that could happen would be for you to learn something about your market and your business - it's worth a shot.

New Year's is a great time to reinvent your website - and even redesign it. If you want a fresh start with a new design and layout, then you can contact a web designer or a design company, such as Codank Web Design, to help you clean up your site and make it fresh for a new start.

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 use the clone stamp tool in Photoshop

There will be times where you have a photograph that is almost ready to use - except for one or two details. It is inevitable that there will be things about a photograph that you don't like and that you want to change. Photoshop makes it easier to get the look you're going for, even if you want to edit a part of the picture out. In this tutorial, we'll look at how to use the clone stamp tool in Photoshop CS4 to remove an unwanted berry.

First, open the picture of the berries in Photoshop. You don't want to override your original picture, in case you want to use it some day, so save it under a different name (such as clone stamp sample) by clicking on File then Save As. The next thing you should do is analyze your picture and look at what you need to change or remove; you can use the zoom tool (the magnifying glass in the Tools panel on the left hand side of the workspace) if you need to. Are there any elements that stick out or detract from the overall composition? In this case, I felt as though the berry on the far right took away from the focus too much, and I wanted to remove it.



Use the zoom tool to zoom in on the stem of the berry. Look for where it is attached, then select the clone stamp tool (it's right under the brush tool) from the Tools panel. Go to the top bar and change the brush size to something like 20 px, then make sure that the brush opacity is set for 100%.



Hold down the ALT button until you see the crosshair appear in the brush circle, then click on an area close to the stem. This will copy those pixels and let you drag the selection over the area you paint, concealing it. The crosshair will move with the brush, selecting new pixels as you go, so make sure you don't select pixels right up on the very edge of the stem. Continue to brush and select new areas along the stem until you've painted over the whole thing.



Do the exact same thing for the rest of the berry. You can make your stamp size larger, but keep in mind that the bigger it is, the more adjacent pixels it will pick up with each selection and movement. Paint along each edge carefully, working your way into the center of the berry. Once you're finished, you can grab the healing brush tool (it looks like a band-aid) and brush over any patterns that stick out to smooth it over.





This was an easier example, but there will be pictures that are more difficult to work with. It takes time and practice to master the use of the clone stamp, but it is a very powerful tool that you should know how to use if you plan on working with Photoshop.

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 computer wallpaper in Photoshop CS4

When customizing a computer, one of the first things to be changed is usually the theme or the background wallpaper. You can find many free wallpapers online, but sometimes you might want to create your own. In this tutorial, we're going to look at how to make color adjustments, abstract lines, and a simple composition in Photoshop CS4 to help you learn how to create your own computer wallpaper.

The first thing you need to do is find out your screen resolution (size). This works a bit differently in Windows Vista and 7 than it did with XP or earlier. To change the desktop in Windows XP or earlier, right click on the desktop and choose Properties. Then click on the Settings tab and you should see your screen resolution. In Vista or 7, right click on the desktop and choose Personalize. Then find the option Display in the lower left hand corner of the Control panel window. Once the Display window shows, look over on the left-hand pane and click on Adjust Resolution. You'll be able to see your screen resolution from there. Mine is 1900 x 1200, so I make note of this and exit the control panel window.

Find the picture you want to use in the background of your wallpaper. For this picture, I've decided to use a bokeh picture from MorgueFile. Once you open the picture in Photoshop, go to the top bar and click on Image then Image Size to check the size. This particular one is larger than I need it to be, so I adjust the width to 1900 px (the height can also be adjusted some by cropping the photo). Just make sure that the checkbox for Constrain Proportions is checked.



Now we need to adjust the coloration. To do this, we need to neutralize the colors already present first by adding a black and white adjustment layer. Click on Layer and then New Adjustment Layer; choose Black and White from the options available. You can navigate to the Adjustments panel on the right hand side of the work space (and if you don't see it click on Window, then Adjustments) and change the sliders to make certain colors look more black or white. In this case, though, I've left the default settings.



Next, we need a layer to add some color to our picture. To do this, click on Layer, then New Adjustment Layer, then Hue/Saturation. In the Adjustments panel, check the box next to Colorize and change the values to the following: Hue = 237, Saturation = 49, and Lightness = -10.



Open the second picture you want to use. I've decided to use a black-and-white photograph of roses from MorgueFile. I want to make some contrast adjustments, so the first thing I need to do is add an adjustment layer. Click on Layer, New Adjustment Layer, then Brightness/Contrast. Change the Brightness setting to -60 to adjust the lighting. You can play around with the settings until you're satisfied.



With the adjustment layer selected, right click and then choose Merge Layers from the list of options. This way, the changes are applied and we can make a selection of both layers.



Now we need to select the roses so we can copy them into the other document. Select the magnetic lasso tool from the Tools panel on the left hand side of the work space. Near the top bar, there is a list of options to customize the tool; find where it says Feather and change that to 2 px. This will make our selection have a nice, soft edge and will allow it to blend in more with the rest of the composition, smoothing out any sharp or jagged edges. After you do that, carefully drag the magnetic lasso around the roses and click to create new points where the tool doesn't want to take. When you come back around, you should see a little circle near the top of the tool pointer; click the starting point and it will select the roses.



Copy the selection and switch back to your wallpaper document, where you will paste the roses. Press Ctrl + T to scale the roses down; drag a corner of the bounding box in while holding down Shift to keep it proportional. Once you're satisfied, click on the check mark at the top of the workspace.



We need to get rid of some of the dark background from the roses photograph that is still there between the stems. Hide the bokeh background layer by clicking on the eye next to the layer thumbnail in the Layers panel. Then, click on the zoom tool in the Tools panel (it looks like a magnifying glass). Zoom in until you're comfortable, then choose the magnetic lasso again and select the dark areas that are still left over, pressing delete after each selection.



Click on the eye icon next to the bokeh background layer to unhide it. I wanted to add some color to my roses at this point, so I made two new layers above the rose photograph layer - one for the petals and one for the stems. To create a new layer, click on Layer then New then Layer - and you can give them names to differentiate them when the new layer dialogue box appears. Once you've done that, it might be a good idea to group some layers so the Layers panel is more organized. To group the layers that make up the roses, click on Layer then New then Group and give your group a name just like you would a layer, then drag the layers you want to include into the group.



Next, click on the brush tool in the Tools panel, then the color swatches at the bottom of the Tools panel to change the color. I chose a blue color (hexadecimal 066AFF) for the petals and a dark green (hexadecimal 07180B) for the stems.



Select the petals layer and go to the top of the Layers panel. Where it says Normal, click on the drop down and choose Overlay from the list of options. This will allow you to brush a color on the petals while keeping the texture, shadows, and lighting from the layer below. Be sure to choose Overlay for the stems layer as well.



Use the brush tool to carefully paint the blue color over the petals. If you make a mistake, you can always use the eraser tool to fix it. Use a bigger brush for the middle of the flowers and a smaller one for the edges. When working with a dark background, you may notice that any brush strokes that go outside the lines don't show up. They're still there, but since the mode is set to Overlay, it won't show up. If you were working with a background that was any other color than black, then it would show up. If you want to make sure this doesn't happen, then hide the bokeh background layer so you can see where you're brushing.



Do the same thing with the stems, using the green color. Once you've finished coloring and cleaning up any stray lines, go to the top of the Layers panel where the opacity dropdown is. Move the slider or type in the number 80 to make it a little lighter and to mix in more of the underlying gray, so it won't look too dark.



We're not done yet; now we might want to spice it up by adding some abstract lines, so create a new layer. Making sure that you have your foreground color set to the same blue as the petals, click on the line tool in the Tools panel (you might find it under another shape tool, in which case you should click on the little black arrow at the corner of the shape tool button). Drag a medium sized diagonal line out over the document. You can draw a second one next to it - or copy it by right clicking on the shape layer and clicking Duplicate Layer.



After you have two lines, select both line layers by pressing down Ctrl while clicking on them. Again, right click and select Duplicate Layer. Do this one more time when you have four lines so you will have eight. You can use the move tool at the top of the Tools panel to adjust spacing. Then, make sure you have all the line layers selected, right click, and choose Merge Layers.



Now we want to make the lines have a bit of wave. There are a couple of ways you can go about this, but I want to use a transform. So click on Edit, Transform, then Warp. This gives you more control over where the wave goes.



Pull on the corners and the lines until you're satisfied; I've made my lines swish around the roses to give it a sense of movement.



Next, we want to add some interest to the lines. I've decided to give mine a bit of a glow. So right click on the Lines layer and choose Duplicate Layer. Then, use the move tool and the arrow keys to nudge it over to the left by two spaces.



Select the bottom lines layer (the original lines layer) and click on the fx at the bottom of the Layers panel. Then choose Blending Options.



We want to add a glow, so click on outer glow and then click on the color swatch in the Blending Options dialogue window. Use the eyedropper to pick up a purple color from the bokeh background. Next, change the Technique to Precise, the spread to 5%, and the size to 8 px. This will all make it a bit more noticeable.



To make the glow look more convincing, we should blur the layer. Make sure that the bottom lines layer is selected, then go to the top bar and click Filter. Next, click on Blur, then Gaussian blur. You can use a radius of 2.0 when the dialogue box pops up.



Finally, select the Lines copy layer and change the Layer mode to Color Dodge. This will make the lines a lighter color of whatever they overlay, sort of like a highlight.



And that's it! Now you know how to create a background wallpaper in Photoshop. You don't need to stick with this design by any means; playing around with Photoshop will help you learn new things and learn how to create beautiful compositions and designs.

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

The benefits of using CSS3

Since the early days of the Internet, if you wanted more than just a flat color, you had to use images for your web designs. Gradients, drop shadows, and other elements had to be added in Photoshop—but things have since changed. Over the past couple of years, CSS has advanced to the point that you can add these things using coding that is interpreted in the browser. Although CSS3 doesn't have full support from every browser just yet, it is a huge step ahead for the design community. And here are just a few of the reasons why.

Better usability. Using coding instead of images means that your pages will load faster. It cuts down on the amount of HTTP requests, which means less bandwidth is taken up and the network runs more smoothly. Furthermore, using images isn't always good for universal usability; it could make it difficult for people using devices other than a desktop or laptop computer to access and navigate the pages. This is especially true for smart phones. The small screen size causes the images to load slowly and become distorted. By using hard coding, then the website's overall layout and design will look better in all browsers.

Smaller file sizes. One of the reasons why web pages using CSS3 load faster is because the file sizes are smaller. In addition to loading faster, having smaller file sizes saves room on the server and the computer, both when the page is created and when it is loaded in the browser window. Using CSS3 means that less resources are used.

Faster development time. Another area that CSS3 excels at is saving time when it comes to the development stages of building a website. Coding takes less time than creating the effects in Photoshop and going back and forth between your computer and the FTP client. Furthermore, when you need to make changes and see what they look like live, you can simply tweak the coding in the CSS file and save it, then refresh the page, whereas using image files, you'd have to save the images and upload them all to the FTP before you could refresh the page. Although the time may seem negligible for each image, managing more than a couple of images will cause the time to build up.

Although it may be some time before CSS3 is instated as protocol, it is already being utilized and steps are being taken towards making it standard. There are too many benefits to let it fall by the wayside. So even though there are still browsers that don't fully support CSS3, it is beneficial to use it along with a fallback, to make your sites ready for the future.

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

Why you should create a mobile website

These days, more and more people are accessing the Internet on the go, leading to the rise of mobile Internet. It is predicted that within a few years, the number of people who use their mobile devices to access the Internet will outnumber those who use desktop PCs and laptops. Although there are a few years between now and then, you should still make sure you have a stripped down mobile version of your website ready since there is such a large chunk of mobile users. If that isn't enough to convince you to optimize for mobile use, here are a few more reasons why.

Non-mobile layouts look cramped. There is nothing worse than trying to use a site on your mobile device where the layout is crammed together and items are overlapping. The small screen size forces elements on top of each other, making it difficult to use. Websites that rely on images or tables are especially bad; elements can mysteriously disappear or render in strange ways.

The navigation doesn't always work. There have been instances where I've tried to use my phone to access a website, but have been unable to because of faulty navigation. Using the arrow keys doesn't always get me where I want to go, and sometimes links are inaccessible due to the way the site is coded and laid out. There are also problems if the navigation uses dropdowns (which don't work in all mobile devices) or if your device uses a touch screen and you're unable to click on the correct link. If users can't navigate a site, they'll go somewhere else for their information.

Mobile Internet is often slow. There are some users who already have 4G and don't have as much of a problem, but there are still users who have 3G network speed and below. My phone doesn't even get 3G speeds, so it can take a good while for non-optimized pages to load. This is especially true if you have a lot of media, JavaScript, or images on your pages. People tend to be impatient when they're on a mobile device - more so than when they're browsing the Internet on a desktop computer. So if you want to keep your mobile visitors, make sure you have a mobile version of the site and test it to make sure it loads within a couple of seconds.

Creating a mobile version of your site is not hard to do - and you don't have to do it alone. You can contact a design company, such as Codank Web Design, to help you create an optimized mobile version of your website so you won't fall behind the times.

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 design a coming soon page in Photoshop CS4

Even if you don't know how to code using HTML and CSS, you don't have to be left out of the design process. By taking a few stock photos, icons, and using the tools available to you (such as Photoshop), you can come up with a design concept in a relatively short period of time. Coming soon pages can be especially tricky to come up with, which means the planning and designing stages are all the more crucial. You want to make an engaging page that gives visitors a couple of options of what to do next, and you want to give more intrigue and information than a simple, white “Under Construction” page. In this tutorial, we're going to look at how to create a design concept for a coming soon page using Adobe Photoshop CS4.

Before we get started, here are a few basic pointers for coming soon pages that you should keep in mind:

• Use a theme that has the colors of your website or is close to the subject matter of your website


• Have the site's logo and name


• Use the term “Coming Soon” somewhere on the page


• Have a few lines of information about what the site is going to be about


• Have a form for signing up to be notified when the site officially launches (with text boxes for name and email address)


• Have links to social media (Twitter, FB, your blog, etc)


• Have copyright and year in the footer

You don't have to have all of these options stuffed in your page, but at the very least, you should have the site's logo and name, a few lines of information, and a form for your newsletter or site launch notification. Sometimes keeping it simpler is better.

To start your project, open Photoshop and create a new document by clicking File then New. You want to make your document size as close to a screen size as possible, while leaving a bit of room. In this case, I've made mine 1100 px by 900 px and left the background transparent.

You can fill the background layer with color, or you can create a new layer (like I did) just in case. To create a new layer, go up to the top bar of the workspace and click Layer then New then Layer. When the new layer dialogue box pops up, you can type in the name you want to give it (and I've named mine Site Background Color).



Now click on the color swatch on the Tools panel on the left hand side of the workspace. For this project, I've chosen to make my coming soon page for a fictitious campground site, so it has a 'woodsy' theme. To go along with my theme, I've chosen a forest green (hexadecimal value 355739) for the background. You can use the color picker to choose this color or any other color you want.

To fill the background, click on the paint bucket tool on the Tools panel on the left hand side of the workspace. If you don't see it, click on the little black arrow at the corner of the gradient tool.



It looks nice, albeit flat. So I want to add some interest to it by adding a pattern overlay. To do this, navigate to the bottom of the Layers panel on the right hand side of the workspace and click on the fx. Then choose Blending Options to bring up the dialogue box.



Click on Pattern Overlay and choose Overlay from the Blend Mode drop down. This will ensure that you retain the color you've chosen in the previous steps. Once you've done that, click on the black arrow next to the pattern preview and look through the options. I've chosen to use the Slate pattern; you may not see any you want in the ones available, so if you want to browse more options, click on the little black arrow next to the list of patterns.



At this point, we can move on from the background to the top banner (if you want to have one; you don't technically have to have one on a coming soon page). You can use a picture you already have or find a stock picture. I've chosen to use a picture I edited in another tutorial. In order to use it for the banner, I need to resize it. To do this, go to the top bar and click on Image then Image Size. Once the dialogue box pops up, make sure that the Constrain Proportions and Scale Sizes checkboxes are marked, then change the value of the width to 1100 px.



The width is the right size, but the height is too big, so we need to do some cropping. Choose the crop tool from the Tools panel and drag it around the area you want to keep. Once you're satisfied, press Enter. You may need to do this a few times to get the size you want; just keep checking the image size by clicking on Image and then Image Size to see if you get the size you want. It's best to have the image around 150 to 200 px high.



Once you finish cropping it, you can select the picture by pressing Ctrl + A, then copy it by pressing Ctrl + C. Switch back over to the website design tab and paste the image; a new layer will be automatically created for it. I thought the contrast between the picture and the background was a little much, so I went to find a little something to add to the banner to soften it. I opened another file I'd used in a tutorial and used the rectangular marquee tool (found in the Tools panel) to select a thin strip of the water to use in my website design. If you do something like this, make sure that you Feather your selection (by entering a value in the Feather text area near the top bar; I made mine 10 px). This gives it a nice, soft edge and a gradual fading out along the edges to help it blend in more.



You can use the Move tool on the Tools panel to drag or nudge the images and arrange them where you want them. Here's what my design looks like so far:



Now that our banner is done, we want to start working on the content for the rest of the page. You can make your own logo, use your company's logo, or find an icon to use as a logo on a site such as iconfinder.com. Generally speaking, the logo and the site's name would go on the banner, but for a coming soon page, it's put in the middle of the screen. So once you've found the icon you're going to use, you can paste it and move it beneath the banner. I've used an icon I found on iconfinder; it's just a little small. If you want to resize your logo, you can do so by clicking Edit then Transform then Scale.



Use the bounding box handles to change the size of the icon; be sure to hold down the Shift key while doing so to ensure that the proportions remain. When you're finished resizing it, click the green arrow at the top of the workspace.



The icon I used was black, and it doesn't blend in with the colors or the theme that well. My text is going to be light, so I want to make my icon match. To do this, I went down to the bottom of the Layers panel and clicked the fx, then clicked Blending Options. I chose to use a Color Overlay and click on the color swatch to change it to white.



It's time to add some text, so click on the text tool in the Tools panel. Once you select it, you get a number of options along the top bar, including font family, font weight, font size, alignment, color, etc. I chose to use a heavy serif since the name of the site is important and I want it to draw the most attention; the font I used was Casablanca Heavy SF with a crisp anti-alias method. I also clicked on the color swatch and chose a color from the thin water banner, then moved the color picker up so it was just a slightest tint of yellow.



We need to choose the color of the text areas for our form. I want mine to blend in with the colors to give it a more sophisticated feel, so I've used the color picker and the eyedropper tool to select the background color. Then I dragged the color picker down so it was a darker shade of that color (I used hexadecimal 223b29).



Once you've done that, find the shape tool on the Tools panel and click the black arrow at the corner for more shape options. I've chosen to use a rounded rectangle shape.



Drag a box out as wide and high as you want it to be. Once you've done that, you can use the path selection tool (that looks like an arrow) from the Tools panel to select the box, then press Ctrl + C to copy it and Ctrl + V to paste it. Drag the second box out to the side. Copying the first box will ensure that both boxes are identical.



Use the move tool to move the boxes down, then select the text tool and choose a sans-serif font such as Arial for the second heading and the body text. I chose to use Arial in white. Make the second heading smaller than the logo text and the body text smaller than the second heading. Once you've typed 'Coming Soon' and a brief introduction to the site, then you can adjust the size of your form boxes to make sure they fit. You can do this by clicking on Edit then Transform then Scale.



Now we need to put some text inside the form boxes to prompt users. To do this, click on the Text tool and choose a font from the drop-down. I decided to use a serif font (going with the classic Times New Roman) and italicize it. I also changed the anti-alias type to Strong. Then, to make it blend in more with the text boxes, I went to the top of the Layers panel and clicked on the arrow next to the opacity drop down so I could turn the opacity down to 70%.



Next, we need a submit button. Generally, it's a good idea to have the word Submit somewhere near the button. We're running out of room, though, and users know what an arrow means, so we're just going to create an arrow button. To do this, go back to the Tools panel and click on the shape tool and choose the rounded rectangle tool. Drag a small rounded rectangle next to the E-mail address text box. You can use the move tool to drag or nudge elements as needed to fit in the space; remember, you want your margins to look nice and you want to line your elements up as much as you can on either side.

As soon as you've done this, it's time to pick an arrow shape from the shapes library. Again navigate to the shape tool and click on the little black arrow for more shape options. Choose the Custom Shape Tool and then go to the top bar. Click on the little arrow next to the shape that displays for more options; you can always click the secondary black arrow next to the list for even more options. Once you find an arrow you like, select it. I've chosen to use an arrow that sort of looks like a compass arrow since the site's theme is camping.



Drag the arrow out to fit in the button. If the shape disappears, make sure your shape layer doesn't have a color overlay over it. If it does, just drag the style down to the trash can icon at the bottom of the Layers panel.

Next, we want to create the footer. To do this, go to the shape tool and click on the rounded rectangle shape. Drag the shape tool to make a thin rectangle at the bottom of the page. Once you do that, you can navigate to the top of the Layers panel to turn the opacity down to make it blend in more with the design (in this case, I've turned mine down to 50%).

Use the text tool to add some small copyright text to the bottom left of your footer. You can also include icons of the social networks your company is on, such as Twitter, Facebook, and Blogger. You can use iconfinder.com to find small icons (I've used ones that are 32 x 32 px) and copy and paste them into your document, using the move tool to arrange them at the bottom.



And that's about it! If you want to, you can merge some of your layers, but you want to preserve most of them so that the web designer or developer you're working with can take the images you've created and use them when building the code for the website. Make sure you save the document as a PSD file to retain the layers.

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