Tutorial Resources

• Starburst Brush Set
• Heart Logo
• NIXUS Icon Pack
• Androgyne Font

Lets Get Started

1. Open up Photoshop and create a new document with the dimensions of 1200×1000.

Background

2. The first area we will start with is our background. Using your Paint Bucket Tool (G), fill your background layer with #FD6E8A.

3. We want to create a polka dot pattern we can add to our background. To do this we need to create a new document with the dimensions of 45×53.

4. Create a new transparent layer and delete your background layer. Next add two circles in the following manner with your favorite Ellipse Tool. I used the Elliptical Marquee (M).

5. Go to “Edit>Define Pattern” and then insert the name Polka Dot for your pattern name. You can then close out of this document and return to your template where we will be using our newly created pattern.

6. In your layers palette create a new blank layer and name it dots. Using your Pattern Stamp (S), find your Polka Dot brush in the drop down menu. Then proceed to brush with a large soft brush until you have results that look similar to the following:

7. Then lower the opacity of your dots layer to about 2%. This will keep it very subtle in our background.

8. Now using your Ellipse Tool, create a circle that looks like the following:

9. Then we want to use our Pen Tool (P) to create a shape on top of our circle that looks like the following:

10. Once you are happen with your results, select both layers and then right click and choose Merge Layers to put them onto one layer. Lower the opacity of your layer to around 19%. We then want to duplicate this layer twice by hitting Command+J. Move your shapes in the following manner. Make your second copy 24% opacity, and then make your third 42%.

11. The last touch we will add to our background is by adding a Starburst Effect. We will use one of the brushes from this brush pack. With a foreground of #FD6E8A, place it in the following manner. I lowered the opacity to around 22%.

Header

12. For the logo I have prepared a “Candy Cane Heart” by modifying a candy cane icon found here. Using the font Androgyne, place your logo text on two separate text layers.

13. On your “Rachel’s” layer, insert the following blending options:

14. On your “Candyland” layer, use the same drop shadow you used on the “Rachel’s” text layer. You will have something that looks like this:

15. Now we will move onto our user account bar that will float to the right. Using your Rounded Rectangle Tool (U) with a radius of 10px, and a foreground of #BC3D56, make a rectangle that is similar to the following:

16. We want to add a highlight around our Rounded Rectangle next. To do so we want to Command+Click our thumbnail of our Rounded Rectangle in our Layers Palette to make it an active selection. Then go to “Select>Modify>Contract” and input 1 in the dialog box. Fill your selection with #FFFFFF on a new layer, and then contract it by 1 again and go to “Edit>Clear”. You will be left with a white line that looks like this:

17. Change the blend mode to Soft Light on this layer, and then lower the opacity to around 38%. Now add the following blending options to your highlight layer:

18. Add some text to symbolize links with the color #FDDCE3, and you’ll have something that looks like this:

19. Now we need to create a search field. Using your Pen Tool, create a shape that looks like the following with a foreground of #72A0E5.

20. Use Command+J to duplicate your shape and then go to Edit>Transform>Flip Horizontal and align it in the following way. Once you have it like you want it, select both layers and right click. Choose Merge Layers from the drop down menu:

21. Now add the following blending options to your search box:

22. All that is left for the search box is to add an input field with your Rounded Rectangle Tool with a 5px radius. I then used a magnifying glass icon from the NIXUS icon pack.

23. The last area of our header is our main site navigation. Using your favorite Rectangle Tool, make a black rectangle that looks like the following for the back of your navigational menu. Our first link “Candy” is going to be #FFFFFF, while our non-active links will be #FDDCE3.  The font used for the links is called “Chalkboard”.

24. For our active tab, we want to make a Rectangle in a similar shape as the following. The color doesn’t matter as we will be adding a gradient to it later:

25. Now on your tab layer, add the following blending options to give it a nice gradient.

26. To add a little extra detail to our tab, we want to cut out a little chunk on the top. Using your Polygonal Lasso Tool (L), make a selection similar to the following and then choose “Select>Inverse”. Then hit the layer mask icon in the layers palette with your tab layer selected.

27. The final touch will be to add a white highlight around the edge like we did for our account links section in step 16. We will then set it to Soft Light, and then lower the opacity to about 62%.

28. The last step for our header is to add our Candy Cane effect under the navigation. Using your favorite Rectangle Tool again make a rectangle that looks like the following:

29. Now add the following blending options to your layer:

30. To achieve our candy cane lines, we want to create another pattern. So to do so we want to create a new document with the dimensions of 600×600. Create a new layer and delete your background layer so you are left with a transparent document. Then add a bunch of rectangles in the following manner (I made my background black so you can see better, but yours will be transparent):

31. Then go to “Edit>Define Pattern” and name it stripes. Close out of your stripes file, and then go back to your template now. Command+Click your Candy Canes background to make it an active selection, and then use your Pattern Stamp Tool to brush your newly created pattern on a layer above:

32. Change the blend mode to Overlay, and the lower the opacity to 28% and your completed header will look like the following:

Content Area

33. The content area will rely mostly on placement of images and text, and keep things simple. We will have a white background, and use the color #28140D for our body text, #AF3F55 for headings, and #5987CB for our links.

Footer

34. The last step is adding a footer. Using your Rounded Rectangle Tool with a radius of 15px, make a shape that looks like the following under your content layers:

35. Now add the following blending options to your newly created Rounded Rectangle layer:

36. I then proceeded to use the same candy cane effect we used in the navigation to add stripes to our footer. I changed the blend mode to Soft Light, and lowered the opacity to 15% this time.

37. All that is left now is to add some text and any icons in your footer and your final result will look something like the following:

As I See It

Bacardi Elixr

Bazooka

Chevrolet Summer

Chrysler – Paper City

Jane

Joe

Iouboutin’s Stories

Motorokr i856 by Nextel

Open Your Eyes

Portfolio – Burjuman

Portfolio

Pringles Pepper

Quicksilver

Ray Ban

Silk

Silk

Surfrider

UNHCR / ACNUR: Stockings

Vote Red

War…It’s only a game

Your Singapore

Tutorial Resources

• Blackout Font
• Mono Icon Pack
• Twitter Bird Icon

Lets Get Started

1. The first thing we need to do is create a new document with the dimensions of 1020×1200.

2. Using your Paint Bucket Tool (G), fill your background layer with #AED6EE.

3. Next, we want to add a little gradient at the top of our background. While we could do this on our background layer, I want to go ahead and make a new layer and make a white rectangle that looks similar to the following. I do this because it makes things more precise for when you go to code:

4. Now insert the following blending options by right clicking your layer in the layers palette and choosing blending options from the drop down menu.

5. Starting with our header, we want to create our logo. Using your favorite rectangle tool, create a rectangle similar to the following with a fill of #D4EF9F:

6. Add the following blending options to your newly created rectangle layer:

7. Next we need to add the text for our logo. For our design we will be using the font face Blackout, with #FFFFFF as its color. On your text layer add the following blending options:

8. Using your favorite Rectangle tool again, make a rectangle similar to the following and fill it with #416073.

9. Now add the following blending options to your newly created rectangle:

10. Our navigation will keep with the simple theme. Using Helvetica, and icons from the pack listed above lay your links out in a similar fashion. Our active link will have a #2D4655 rectangle. Our links colors will be #99CAEA, and our icons colors will be #AED6EE.

11. Under our navigation, we want to display our recent tweet. To do so we want to create a cloud using our Elliptical Marquee tool (M). Hold SHIFT to add to your selection and make something that looks like this and fill it with #FFFFFF:

12. Next, add a slight drop shadow to your cloud.

13. After adding some filler text, and the twitter icon, your header will look something like this:

14. For our content area we want to make it looks like there are a couple pieces of paper stacked on top of each other to give it a unique look. First make a white rectangle that looks like the following:

15. Next, duplicate this layer and move your duplicated layer (Command+J) under your original. Hit Command+T to make your duplicated layer transformable and rotate it to the right until it looks something like the following:

16. Go back to your original layer now and add the following blending options:

17. For each project, we want to add a thumbnail preview with the name and category of our portfolio piece. Using your favorite rectangle tool, create a rectangle that looks similar to the following and make sure it had a fill of #FFFFFF:

18. Now add the following blending options to its layer:

19. All you need to do now is add a preview image, and some text with the color #416073, and then repeat the process until you get something that looks like this:

20. The last step for our content area is to add our back and next buttons. For our button we will be using the same effect we used in step 14 for our background. Your top rectangle will be #D4EF9F, and the one below it will be #AFD465.

21. Add the following blending options to the rectangle on top:

22. All you need to do now is add an arrow icon, and your text. Your text and icon should be the color #2D4655. The icon used is from the Mono Icon Pack.

23. Do the same thing for a back button, and add some text showing how many pages you have and you’ll have something that looks like this:

24. The last step is adding our footer. We want to make it feel as if we are in the clouds, so using your Elliptical Marquee Tool (M) make a selection and then hold SHIFT to add to your selection and fill it with #FFFFFF. Keep adding to your selection until you get something that looks like this:

25. All that is left is to add some text in your footer for your links and your copyright and your final Photoshop template will look like this:

Barcelonda

HMF

I’m Super

Illustrated Type 3

ISTD Brief 2010

Kilogram

Letterform for the Ephemeral

Monteith’s Brewing Co.

MTV BLOOM

Mundos dos Crepes

Nike Air Force 1 Sculpture

Nuzzles

Type

Types

Typographic Work #2

Unleash / 2010

VAL Stencil

The winners were chosen at random through a  sql query to make things fair.  Below is the proof for all of you who would like to see for yourselves.

Winners

• Charlie
• ZiO
• Zack Esgar

Thanks for everyone who participated in the contest, and be sure to check back for future contests and giveaways.  We would also like to thank Deposit Photos for making this possible.  For the winners, you will be emailed with directions on how to claim your winnings.

Tutorial Resources

• Create a Chalkboard Style WordPress Layout in Photoshop

Lets Get Started

1. The first thing we need to do is set up our folders. Create a folder called “xhtml”, and then create another folder inside it named “images”. The xhtml folder is where we will be saving our html and css files. So next open up Dreamweaver and create a new html document. Choose XHTML 1.0 Strict.dtd from the doc type option – then save it as index.html.

2. Next create a CSS file in the same fashion, and save it to your xhtml folder with the name “style.css”. You could save it to a separate folder, but for this tutorial it will be easiest to keep in the same directory as your html file.

3. So far your file structure will look something like the following:

4. We want the CSS file to link to our index file, so we need to add the following link tag in our header before the closing head tag.

5. Before we get into the coding, lets go ahead and get all our images ready for the design. Open up your template in Photoshop and then proceed to crop or slice the following images in your design.  Images that are saved with “.png” need to be transparent, so hide all layers under given item.  Filenames are above each image.

“home.jpg”

“home_active.jpg”

“about.jpg”

“about_active.jpg”

“contact.jpg”

“contact_active.jpg”

“background_pattern.jpg”

“border.jpg”

“category_hover.png”

“comment.png”

“date_back.jpg”

“facebook_icon.jpg”

“flickr_icon.jpg”

“rss_icon.jpg”

“footer.jpg”

“frame_btm.jpg”

“frame_top.jpg”

“green_board.jpg”

“latest_articles.jpg”

“logo.jpg”

“search.png”

“search_field.jpg”

“sponsors.png”

“title_back.png”

“twitter_icon.jpg”

6. Now that you have your images prepared and ready, we want to get into the code. Starting with the header, copy and paste the following CSS into your CSS file.

body {
 font: 11pt Arial, Helvetica, sans-serif;
 background: url(images/background_pattern.jpg) repeat;
 margin: 0;
 padding: 0;
}

img {
 border: 0;
}

#wrapper {
 width: 940px;
 margin: auto;
}

#logo {
 display: inline-block;
 float: left;
 width: 272px;
 height: 171px;
 text-indent: -999999px;
 background: url(images/logo.jpg) no-repeat;
}

#header {
 height: 112px;
 margin: 20px 0 0 0;
 overflow: hidden;
}

#header ul{
 float: right;
 margin-top: 22px;
}

#header ul li{
 display: inline-block;
 float: left;
 height: 48px;
 margin: 0px 0px 0px 5px;
}

#home_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/home.jpg) no-repeat;
}

#home_btn a:hover {
 background: url(images/home_active.jpg) no-repeat;
}

#about_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/about.jpg) no-repeat;
}

#about_btn a:hover {
 background: url(images/about_active.jpg) no-repeat;
}

#contact_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/contact.jpg) no-repeat;
}

#contact_btn a:hover {
 background: url(images/contact_active.jpg) no-repeat;
}

.replace{
 position:relative;
 /* \*/
 overflow:hidden;
 /* */
}

.replace span{
 display:block;
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}

7. Then in your HTML File you will have something that looks like the following:

8. Next we want to set up our chalkboard. Add the following chunk of code to your CSS file. You will notice an “@media screen” option in this stylesheet. What this does is gives a different set of styles for users using Safari in order to make it look the same across all browsers.

#content {
 display: block;
}

#categories {
 height: 58px;
 width: 940px;
 background: url(images/frame_top.jpg) no-repeat;
}

#categories li {
 display: inline-block;
 margin: 20px 0 0 5px;
}

#categories li a {
 display: inline;
 color: #d8c0a8;
 padding: 7px 17px 15px 13px;
 text-decoration: none;
}

#categories li a:hover {
 height: 31px;
 width: 87px;
 padding: 7px 17px 15px 13px;
 background:url(images/category_hover.png) no-repeat;
}

#content_frame {
 display: block;
 position: relative;
 height: 850px;
 margin: -13px 0 0 0;
 background: url(images/border.jpg) repeat-y;
}

#content_area {
 display: block;
 height: 100%;
 width: 875px;
 margin-left: 33px;
 padding: 20px;
 background: url(images/green_board.jpg) repeat-y;
}

#latest_articles {
 display: block;
 width: 183px;
 height: 38px;
 background:url(images/latest_articles.jpg) no-repeat;
}

/* LEFT COLUMN */

.left {
 float: left;
 width: 560px;
}

.left ul {
 position: relative;
 margin: 0 0 0 -30px;

}

.left ul li {
 display: inline-block;
 list-style: none;
 margin: 10px 20px 20px 0;
}

.left ul .comment {
 position: relative;
 float: right;
 margin: -3px 0 0 -25px;
 width: 29px;
 height: 32px;
 background:url(images/comment.png) no-repeat;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/*These are alternate styles for Safari */

.left ul .comment {
 position: relative;
 float: right;
 margin: -243px 0 0 -25px;
 width: 29px;
 height: 32px;
 background:url(images/comment.png) no-repeat;
}

}

.left ul li .comment a {
 color: #000;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 margin: 0px 6px 0px;
}

.left ul li img {
 float: left;
}

.datetitle {
 float: left;
 position: relative;
 margin: 160px 0 0 -234px;
}

.title {
 width: 207px;
 height: 37px;
 background: url(images/title_back.png) no-repeat;
}

.title span {
 display: block;
 padding: 10px;
 font: 13pt Arial, Helvetica, sans-serif;
 color: #FFFFFF;
}

.date {
 width: 90px;
 height: 17px;
 background:url(images/date_back.png) no-repeat;
}

.date span {
 color: #FFFFFF;
 padding: 6px;
}

/* RIGHT SIDEBAR */

#right {
 width: 290px;
 height: 100%;
 float: left;
 padding: 12px;
 margin: -20px 1px 0 0;
 position: relative;
}

#sponsors {
 display: block;
 width: 167px;
 height: 52px;
 background:url(images/sponsors.png) no-repeat;
}

#search_title {
 display: block;
 width: 127px;
 height: 32px;
 margin: 15px 0 10px 0;
 background:url(images/search.png) no-repeat;
}

#search_field {
 width: 283px;
 height: 49px;
 margin: 0 0 0 -9px;
 postion: relative;
 background: url(images/search_field.jpg) no-repeat;
}

#search_field input {
 width: 170px;
 height: 20px;
 border: 0px;
 color: #515151;
 margin: 10px 0 0 50px;
}

.social ul {
 margin: 30px 0 0 -35px;
}

.social ul li {
 display: inline;
}

9. Now your HTML will look like the following for the chalkboard area of your design (the content area).

10. In our unordered list, each “li” tag will look like the following for each individual post.

11. The last thing we need to create is our footer. Add the following to your CSS file for your footer styles:

/* FOOTER AREA */

#frame_btm {
 height: 83px;
 background: url(images/frame_btm.jpg);
}

#footer {
 font: 10pt Arial, Helvetica, sans-serif;
 display: block;
 height: 84px;
 padding: 15px 0 0 0;
 background: url(images/footer.jpg) no-repeat;
}

#footer ul li {
 color: #D5D5D5;
 display: inline-block;
}

#footer ul li a {
 color: #D5D5D5;
 text-decoration: none;
}

#footer ul li a:hover {
 color: #D5D5D5;
 text-decoration: underline;
}

#footer ul li span {
 color: #D5D5D5;
 margin: 0 11px 0 11px;
}

#copyright {
 display: block;
 float: right;
 text-align: right;
 margin: 0 30px 0 0;

}

12. When your CSS is finished, you want your html to look something like the following:

Final Result

*Tested in IE8, FF3+, Safari 2.0+

Deposit Photos is your #1 resource for buying and selling Royalty-free photographs and vector images. Their vast library of imagestock coupled with a wide variety of flexible purchase options makes them the most convenient and profitable tool for designers, artists and photographers.

Their libraries are updated daily through contributor uploads that are closely scrutinized for quality and originality. Between the protections and the controls, you’re assured of finding the highest quality original artwork available anywhere.

Whether you’re a designer looking to buy images for a project or a photographer selling your stock, there is no other place that can offer you quality service and management other than Deposit Photos. Their increasingly low pricing and flexible purchase plans makes it easy to buy exactly what you need instead of just what you can afford, and their generous commission structures gives its contributors enormous earning potential. They are most certainly the best of both the worlds.

The Rules and Guidelines

Entering is fast, easy, and won’t take but a few moments of your time to enter.

• All you need to do is leave a comment below.  Make sure to use an email account that we can contact you at when leaving your comment.
• Only one entry per person
• The contest ends on Saturday May 29th.
• The winner will be chosen at random and announced next Monday.

Create a Bright and Sleek Web Design in Photoshop

Create a business web layout in Photoshop

Create a business web template

Create a classy web template in Photoshop

Create a Clean and Classy Web Design in Photoshop

Create a Clean and Modern Web Design in Photoshop

Create a Racing Website

Design a dark business layout

Design a Modern Portfolio Web Layout in Photoshop

How to create a clean blue web layout using Photoshop

How To Create a Rockin’ Website Layout In Photoshop

How to create a web hosting layout

Learn how to create a software layout

Make a Dark Blog Web Design Layout with Photoshop

Portfolio web layout #2 in Photoshop

Tutorial Resources

• Simple & Cloudy Portfolio in Photoshop
• Sliced PSD

Lets Get Started

1.  The first thing we need to do is set up our folders.  Create a folder called “xhtml”, and then create another folder inside it named “images”.  The xhtml folder is where we will be saving our html and css files.  So next open up Dreamweaver and create a new html document.  Choose XHTML 1.0 Strict.dtd from the doc type option – then save it as index.html.

2.  Next create a CSS file in the same fashion, and save it to your xhtml folder with the name “style.css”.  You could save it to a separate folder, but for this tutorial it will be easiest to keep in the same directory as your html file.

3.  So far your file structure will look something like the following:

4.  We want the CSS file to link to our index file, so we need to add the following link tag in our header before the closing head tag.

5.  Now we need to open up our PSD File in Photoshop and prep the images for our layout with slices.  Use your Slice Tool to slice it up similar to the following.  You can downloaded the sliced PSD here for reference.

6.  You will have a total of 16 slices that we will be saving as elements in the design.  If you refer to the Sliced PSD, you can see how all elements have been named to go along with this tutorial.  While most of these images can be saved as JPEG’s, we want to save the cloud header background, arrow, and all the content background pieces as PNG’s to allow for transparency.  When you save all of these images, save them to the IMAGES folder we created earlier.

7.  Now that our images are ready, we can start to code.  We want to start by adding the following CSS to our CSS file for the header part of our design:

body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(images/head_bg.jpg) repeat;
	margin: auto;
	overflow: auto;
}

img {
	border: none;
}

.container {
	width: 930px;
	margin: auto;
}

/* HEADER */

#header {
	margin: auto;
	background: url(images/cloud_bg.png) repeat-x;
	height: 100px;
	width: auto;
	padding: 35px;
}

#logo {
	width: 260px;
	height: 37px;
	background: url(images/logo.jpg) no-repeat;
}

#navigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: right;
	margin-top: -45px;
}

.navlinks li {
	display: inline;
	list-style-type: none;
}

.navlinks li a {
 color: #b64366;
 text-decoration: none;
 padding-top: 8px;
 padding-left: 10px;
 padding-bottom: 8px;
 padding-right: 40px;

}

.navlinks li a:hover {
 color: #FFF;
 width: 68px;
 text-decoration: none;
 background: url(images/nav_hover.jpg) no-repeat;
 padding-top: 8px;
 padding-left: 10px;
 padding-bottom: 8px;
 padding-right:40px;
}

/* TAGLINE */

#tagline {
	width: 700px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #51656a;
	padding-left: 30px;
}

.arrow {
	margin-left: 700px;
	margin-top: -40px;
	width: 26px;
	height: 36px;
	background: url(images/arrow.png) no-repeat;
}

This should all be fairly straightforward, and by following the naming scheme you can see where things will go.  The container will define how large our site area will be.  For our local navigation menu, we will be using an unordered list to display our links in a clean and easy to update way.

8.  Next we will add our CSS for our content area’s background:

/* CONTENT */

#content {
	background: url(images/content_back_repeat.png) repeat-y;
	height: 100%;
	overflow: hidden;
	margin-top: 0px;
}

#content_top {
	background: url(images/content_back_top.png) no-repeat;
	width: 901px;
	height: 26px;
	margin-top: 20px;
}

#content_bg {
	background: url(images/content_repeat.png) repeat-x;
	height: 100%;
}

#content_footer {
	background: url(images/content_footer.png) no-repeat;
	width: 901px;
	height: 43px;
}

The “overflow:hidden;” tag is essential to allow for the background to repeat all the way, past elements that we will be floating later on.

9.  For the featured content, and the contact and blog cloud, we want to add the following CSS styles.

/* FEATURED CONTENT */

.featured {
	background: url(images/featured.jpg) no-repeat;
	height: 65px;
	width: 885px;
	margin-left: 8px;
}

.featured li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
}

.featured img {
	margin-top: 80px;
}

#feat_descrip {
	float: right;
	margin-top: 90px;
	font-size: 12px;
	color: #494949;
	width: 180px;
}

#feat_descrip img {
	margin-top: 15px;
}

/* BLOG & CONTACT CONTENT */

#blog_head {
	background: url(images/latest_blog_head.jpg) no-repeat;
	height: 61px;
	width: 885px;
	margin-left: 8px;
	margin-top: 190px;
}

#left_side {
	width: 435px;
	font-size:13px;
	margin-left: 50px;
	margin-top:  0px;
	float: left;
}

#blog {
	background: url(images/blog_cloud_bg.jpg) no-repeat;
	width: 406px;
	height: 290px;
}

.blog_list {
	display: block;
	list-style: url(images/bullet.jpg);
	color: #494949;
	padding: 50px;
	margin-left: 25px;

}

.blog_list li {
	padding-top: 15px;
}

#right_side {
	width: 435px;
	margin-left: -12px;
    margin-top: 10px;
	float: left;
}

.contact li {
	display: block;
	list-style-type: none;
	padding-bottom: 10px;
}

.contact input {
	background: #3F3F3F;
	color: #FFFFFF;
	padding: 3px;
	border-weight: 2px;
	border-color: #5a5959;
	border-style: solid;
	height: 22px;
	width: 300px;
}

.contact textarea {
	font-family: Arial, Helvetica, sans-serif;
	background: #3F3F3F;
	color: #FFFFFF;
	padding: 3px;
	border-weight: 2px;
	border-color: #5a5959;
	border-style: solid;
	height: 80px;
	width: 300px;
}

#send_email {
	padding-left: 40px;
}

10.  And finally, the last thing we need to do is add the styling for our footer.  This will be fairly basic since we just have text to display.

/* FOOTER */

#footer {
	background: url(images/footer_bg.jpg) repeat-x;
	height: 69px;
	width: 100%;
	margin-top: 15px;
	font-size: 12px;
	color: #F1F1F1;
}

.footlinks {
	margin: auto;
	padding-top: 25px;
}

.footlinks li {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	padding-left: 10px;

}

.footlinks li a {
	color: #c2ecf9;
	margin: auto;
	text-decoration: none;

}
.copyright li {
	display: inline;
	float: right;
	overflow: hidden;
	list-style-type: none;
	padding-right: 50px;
	margin-top: -29px;
}

.copyright li a {
	color: #c2ecf9;
	margin: auto;
	text-decoration: none;

}

11.  Moving back to your index.html document, we now want to arrange it in the following way:

<body>

		<div id="header">

        	<div class="container">

            <div id="logo"><a href=""><img src="images/logo.jpg" /></a></div>

	            <div id="navigation">

          		 <ul class="navlinks">

          		 <li><a href="">Home</a></li>
          		 <li><a href="">About</a></li>
          		 <li><a href="">Portfolio</a></li>
          		 <li><a href="">Contact</a></li>

                 </ul>

                 </div> <!--Navgation Ends -->

    	</div><!--container Ends -->

	</div><!--header Ends -->

	<div class="container">

		<div id="tagline">

    Hello!  My name is Matthew Heidenreich and I create beautiful interface designs for small and large businesses.  If you are interested, please visit my contact page.  What are you waiting for?

		<div class="arrow"></div>

		</div><!--tagline end-->

        	</div><!--Container Ends -->

	 <div id="content_bg">

 		<div class="container">

        <div id="content_top"></div>

        	<div id="content">

            		<div class="featured">

                    <ul>

                    <li><a href=""><img src="images/portfolio_image_1.jpg" /></a></li>
                    <li><a href=""><img src="images/portfolio_image_2.jpg" /></a></li>
                    <li><a href=""><img src="images/portfolio_image_3.jpg" /></a></li>

                    <li id="feat_descrip">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum, lacus ac vulputate consectetur, ante nisi tempor.

                    <a href=""><img src="images/view_all_btn.jpg" /></a>

                    </li>

                    </ul>

                    </div><!--featured end-->

        	<div id="blog_head"></div>

            <div id="left_side">

            	<div id="blog">

                <ul class="blog_list">

                	<li>25 Creative and Artistic T-Shirt Designs</li>
                    <li>Redesign: DeviseFunction Gets a Facelift</li>
                    <li>Create a Chalkboard Style WordPress Layout</li>
                    <li>Stunning use of Transparency in Web Design</li>
                    <li>Underwater Content Box Design in Photoshop</li>

                </ul>

                </div><!--Blog  End-->

            </div><!--Left Side Ends-->

            <div id="right_side">

            <ul class="contact">

            	<li><input type="text" value="Name"  /></li>
                <li><input type="text" value="Email"  /></li>
                <li><input type="text" value="subject"  /></li>
                <li><textarea></textarea></li>

            </ul>

            <input type="image" src="images/send_email_btn.jpg" alt="send email" id="send_email" />

            </div><!--Right Side End-->

    		</div><!--Content End-->

            <div id="content_footer"></div>

       	</div><!-- Container End -->

        <div id="footer">

        <div class="container">

          <ul class="footlinks">

              <li><a href="">home</a></li>/
              <li><a href="">about</a></li>/
              <li><a href="">portfolio</a></li>/
              <li><a href="">contact</a></li>

          </ul>

          <ul class="copyright">

          	<li>Copyright © 2010 Cloudy Studios.  Designed by <a href="http://devisefunction.com/">Matthew Heidenreich.</a></li>

          </ul>

         </div>

        </div><!--footer end-->

    </div><!--content bg end-->

</body>

That is it! If you have any questions, please do not hesitate to ask. All constructive feedback is welcome.

Live Demo

**Note :: only tested in latest version of each browser

Tutorial Resources

• Tutorial Template

Lets Get Started

We just showed you how to create the new Photoshop CS5 Icon in Photoshop, and here is the loading screen.

1. For this tutorial I have provided you with a document with guides already in place to help you while creating your introduction loading screen image. You can download this file from the tutorial resource list above, or by clicking here. Once downloaded, open it up in Photoshop.

2. I chose to use the Polygonal Lasso Tool for the purpose of this tutorial since we will just be creating basic shapes. If you are more comfortable using the Pen Tool, there is no harm in that. Using your Tool, create a shape similar to the following and fill it with #05417F.

3. Right now our shape is a little flat, so we want to add some blending options to our layer to give it some depth. To do this right click your layer in the layers palette and choose blending options from the drop down menu.

4. Next we will continue with making shapes. Using your Polygonal Lasso Tool create a selection similar to the following and fill it with #2B5D9D.

5. Just like before we want to add some depth to our shape, so add the following blending options:

6. Again we need to create yet another shape. So using your Polygonal Lasso Tool again, create the following shape and fill it with #50ADDE.

7. Add the following blending options to your shapes layer:

8. We now want to make another light blue shape that will be in the bottom left side of our document. Using your Polygonal Lasso Tool yet again, make the following shape and fill it with #77CDF6.

9. Add the following blending options to your layer:

9. We are almost done creating our 3D shape, only two more boxes left! Using your Polygonal Lasso Tool create another shape similar to the following with a fill of #295998:

10. Add the following blending options:

11. Just one shape left. Using your Tool for the last time, create a selection that looks similar to the following and fill it with #244E84.

12. Add the following blending options to your layer:

13. The last thing we need to do is merge all our layers. I did this by selecting all of my layers and then right clicking and choosing Merge Layers. We then want to add a drop shadow to our newly created layer by adding the following blending options:

14. All that is left is to add the text and your finished! To create the PS logo, please visit our tutorial on creating the CS5 Icon for Photoshop. When it’s all said and done, you’ll have something that looks like this: