Final Result
Click on the image to view the full-scale final result.
Did you know you can register your domain name, get web hosting, and even find eCommerce software at Network Solutions? Go with a name you can trust when you’re ready to start your online presence.
Lets get started
1. The first thing we want to do is create a new document with the dimensions of 1020×1180.
2. Starting from the top, we want to begin with our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.
3. Keeping it black would just be boring, so the next step is to add some blending options. To do so, go to your layer in the layers palette and right click it and choose Blending Options from the drop down menu. Insert the following:
4. For our navigation, we want to give it a “bubbly” look at the bottom. To achieve this, there are a few different ways of doing it, and the way I am going to show you is very simple. Using your Elliptical Marquee Tool, make a circle simple to the following and fill it with #000000.
5. Now what we need to do is duplicate this layer by selecting your layer in the layers palette and hitting CTRL+J (Command+J). Place your duplicated layer in a similar way as the following:
6. Merge your layers and keep repeating this process until you get something that looks like this going across your header:
7. Using your Rectangle Marquee, make a rectangle similar to the following and fill it with #000000 on its own layer.
8. Merge your “bubbles” layer, and your newly created rectangle layer together and then lower your layers opacity to about 80% and insert the following blending options onto your layer.
9. For the logo I used the font Chunk , and for the musical icon, I downloaded the Mono Icon Set. Keep this set handy as we will use it in other parts of this tutorial. I then applied the following blending options to both the icon layer, and my text layer:
It will look something like this:
10. Our links will be fairly basic on the right side of our header. Using a font similar to helvetica, go ahead and add some white text to represent our links. For our active link text, I used the color #1F282F. I then used the Rounded Rectangle Tool with a radius of 5px to create a box behind my link with the following blending options:
11. Your header should look something like this:
12. Next we want to create the color glow that will be behind our screenshot preview in our featured area. Create a new group in your layers palette (Command+G), and label it “Color Glow”. Then Command+Click your blue background layers thumbnail preview in your layers palette to make it an active selection. With your new group selected in the layers palette, go ahead and chose the layer mask icon at the bottom of your Layers Palette. This will make it so nothing will be visible in our content area of the site.
13. Next use a soft brush to add some bright colors in a similar way to the following, each on their own layer. Then lower the opacity of each layer until you like your results. This is what I came up with:
14. I wanted to add a little starburst effect as well that will radiate behind our screenshots, so I downloaded thisrising sun brush pack and added a starburst effect.
15. Take a screenshot of your favorite music streaming site (I chose last.fm for this tutorial), and place your screenshots in a similar fashion.
16. All that is left for this is to add a little shadow underneath our screenshots. Use your Elliptical Marquee with a bit of a feather, and fill a selection similar to the following with #000000 and then lower the opacity to a point you like.
17. The last thing I did was to add a “Play” icon that I made using my Elliptical Marquee with a black fill, and my Polygonal Lasso Tool with a white fill. Lower the opacity on it and the left side of our featured area will look something like this when we are complete. We will then be able to move onto the right side.
18. Using your Text Tool, add some text in a similar way to the following. Our heading is #1E282F, while our body text is #FFFFFF.
19. With your Pen Tool, make a path similar to the following under your heading:
20. We want to add a stroke to our path. Chose your Brush from your Tools Palette and make sure your foreground is set to #1E282F, with about a 2px soft brush active. Make sure you are on a new layer, and then select your path from the Paths Palette, and then choose the Stroke Icon at the bottom to add a stroke to your path.
21. On your strokes layer, insert the following blending options:
22. The last thing we need to do for our featured box is to add our “Sign up now” button, and our “Find out More” button. To do this we want to use our Rounded Rectangle With a Radius of about 20px.
23. Add the following blending options to your layer:
24. Using your Text Tool, add some text in a similar way to the following. I then added an icon from the Iconic Icon Pack.
25. On your icons layer, added the following blending options to give it a nice green gradient.
26. Then follow the same steps to create a “Find out more” button. The only thing that changes is that our icon will use a different gradient. I used the same gradient as our blue background, except it is reversed. Your header will look like this when it is finished.
27. Our content area is up next. With your Rectangle Marquee, make a selection similar to the following and fill it with #FFFFFF.
28. Insert the following blending options onto its layer.
29. Starting with the left side of our content area, we are going to make the “Start Listening” box. So pull out your Rounded Rectangle Tool from your Tools Palette and set the radius to 10px.
30. On this newly created layer, we then want to add the following blending options:
31. To make the the heading of our box, we want to Command+Click (CTRL+CLICK) the thumbnail in our layers palette of our rounded rectangle layer to select it. On a new layer, fill your selection with #000000. Using your Rectangle Marquee Tool, select most of the box that will house content and choose Edit>Clear. It will look something like the following:
32. Insert the following blending options onto your newly created layer:
33. All that is left for the heading is to add some text to describe the content box. I chose to add a little icon on the right to add a “open new window” type option.
34. Once you add some content into the box, you can have something that looks like the following:
35. The right side of our content area houses a “featured Artist” box, and “What members say” box. These boxes are fairly basic. Using the Rounded Rectangle with a radius of 10px is how I created the container, and the back of the heading. Use the same gradient you used in step #32 for the background of your box, and then use the same gradient you used for your active link in step #10. Add some content and your content area will look like this:
36. All that is left is the footer and then we will be done! Using your Rectangle Marquee Tool again, make a rectangle similar to the following and fill it with #1F282F.
37. Now insert the following blending options onto its layer:
38. All that is left is to add some icons and text and your footer will be complete. All icons are from the Iconic Icon pack we downloaded previously. When it’s all said and done, your final template should look like the following:
Posted in: Web Design
0 comments:
Post a Comment