DeviseFunction - Tutorials and Resources » Tutorials

Twitter Box User Interface Design in Photoshop

Matthew Heidenreich — Mon, 30 Aug 2010 15:42:53 +0000

Final Result

Lets get started

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

2. On your background layer, add the following blending options:

3. Next we want to start by creating the base for our twitter box. Using your Rounded Rectangle Tool with a radius of 10px, create two separate rectangles that look similar to the following:

4. Since we don’t want to loose the edibility of our layers, we want to convert our two rectangles into a smart object. To do so select both your rectangles layers and then right click. Choose “Convert to Smart Object” from the drop down menu. It will appear as if your rectangles have been merged into one layer.

5. We now want to add some details to our smart object, so right click your smart objects layer and choose Edit Contents from the drop down menu. We then want to use our Pen Tool (P) to add some curves to the bottom of our tab:

6. Once you have one side complete, duplicate your layer (CMD+J), and then go to Edit>Flip Horizontally and move it to the other side. You can then save your smart object file and return to your document with it looking something like this:

7. Back on your document, we now want to change the blend mode of our smart object layer to Overlay.

8. Next we want to add some blending options to our finished smart object. To do so right click your layer and choose blending options from the drop down menu and insert the following:

9. Your file will look something like the following:

10. We now need our Rounded Rectangle Tool again. With a radius of 10px, create a rectangle similar to the following below your smart objects layer. Name this layer “non-active”:

11. You can see we need to mask out the overlapping rectangles. To do this we will CMD+CLICK our smart object’s thumbnail in the layers palette. With your selection active we now need to invert it by going to Select>Invert. Return to your “non-active” layer, and then click the layer mask icon at the bottom of the layers palette.

12. Now add the following blending options to your “non-active” layer:

13. With the tabs nearly complete, lets add our text. Add the following Character Settings in your type window.

14. We need a slight drop shadow on our “what are you doing?” text to make it stand out on our light background. Add the following blending options to fix that problem:

14. The last bit of text we need is our “share it!” text at the top left hand side of our box. You the same text options as before, except lower your font size to 10pt, and change your anti-alias to italic. Set the blend mode to overlay and then add the following blending options to your text layer:

15. Your box will look something like this:

16. To split up our links a bit, we want to add a divider between our “@reply” and our “direct messages”. Using your Rectangle Marquee Tool create a 2px wide section and fill it with #FFFFFF.

17. Lower your layers opacity to around 22%, and then add the following blending options to your dividers layer:

18. Then we need to soften the bottom of it a little. To do so we want to add a layer mask to our dividers layer and then brush with a white soft brush until it looks something like this:

19. We are almost finished! Using your favorite rectangle tool create a white square that looks like the following to act as a thumbnail:

20. Next add the following blending options to its layer:

21. The last step is to add our input field. To do this, I used a Rounded Rectangle Tool with a radius of 10px.

22. On our newly created input field layer, add the following blending options to liven it up:

23. Using your Polygonal Lasso Tool we then want to make a arrow selection similar to the following:

24. Now go to Select>Invert. Make sure your input layer is selected, and then choose the add layer mask icon from the bottom of your layers palette with your selection active.

25. All that is left now is to add some text to share and your twitter box is complete!

Create a Colorful Candy Store Website Layout in Photoshop

Matthew Heidenreich — Mon, 28 Jun 2010 05:13:56 +0000

Final Result

Tutorial Resources

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:

Simple Portfolio Gallery Layout in Photoshop

Matthew Heidenreich — Thu, 10 Jun 2010 05:12:32 +0000

Final Preview

Tutorial Resources

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:

PSD to XHTML: Create a Chalkboard Style Wordpress Layout

Matthew Heidenreich — Wed, 26 May 2010 19:45:40 +0000

Coded Preview

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+

PSD to XHTML: Simple & Cloudy Portfolio Layout

Matthew Heidenreich — Mon, 17 May 2010 05:42:24 +0000

Coded Preview

Tutorial Resources

Lets Get Started

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:




		

        	

            

	            

          		 

          		 Home
          		 About
          		 Portfolio
          		 Contact

                 

                 
 

    	


	


	

		

    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?

		

		


        	


	 

 		

        

        	

            		

                    

                    
                    
                    

                    

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

                    

                    

                    

                    


        	

            

            	

                

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

                

                


            


            

            

            	
                
                
                

            

            

            


    		


            

       	


        

        

          

              home/
              about/
              portfolio/
              contact

          

          

          	Copyright © 2010 Cloudy Studios.  Designed by Matthew Heidenreich.

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

Photoshop CS5 Loading Screen in Photoshop

Matthew Heidenreich — Tue, 11 May 2010 05:02:57 +0000

Final Result

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:

Create the Adobe Photoshop CS5 Icon using Photoshop

Matthew Heidenreich — Mon, 10 May 2010 05:34:29 +0000

Final Result

Lets Get Started

1. The first thing we want to do is create a new document with the dimensions of 500×500.

2. To start our icon we want to use our Rectangle Marquee Tool (M) to create a square similar to the following to create the “front”‘ of our box icon. Hold SHIFT while creating your square to make all sides equal.

3. On your newly created layer insert the following blending options. To do this right click your layer in the Layers Palette and choose Blending Options from the drop down menu.

4. To create the side of our box, use your Polygonal Lasso Tool (L) to create a selection similar to the following and fill it with #04407E. To keep your angles straight, hold SHIFT while placing your next point (you could also perform the same task with the Pen Tool).

5. Insert the following blending options onto your newly created layer:

6. The last step for creating the box is to use our Rectangle Marquee Tool (M) to create a selection similar to the following and fill it with #000000. Place this layer under all your other layers.

7. Add the following blending options to its layer:

8. The final step is adding text to our icon. The font Adobe uses for their icons is not licensed. It is called Adobe Clean, and is only available if you work for Adobe. So for this tutorial, we will use something very close to their font choice, which is Myriad Pro. Place the text “Ps” on a layer and make sure the type is set to Semibold.

9. The last thing we need to do is add blending options to our text layer. Add the following:

10. When it’s all said and done your final icon will look something like the following. If you have any questions or comments we would love to hear them.

Create a Textured Paper Photoblog Layout in Photoshop

Matthew Heidenreich — Wed, 05 May 2010 05:02:33 +0000

Final Result

Tutorial Resources

Lets Get Started

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

2. If your background layer isn’t already white, go ahead and use your Paint Bucket Tool to fill it with #FFFFFF. Chances are most of you can skip this step.

3. Next we want to make the grid paper texture on our background. To achieve this effect, we want to make a pattern. In order to do this we need to create a new document that is 31×31.

4. Create a new blank layer and use your Single Column Marquee Tool to make a selection similar to the following and fill it with #D4EAF7. Delete your white background layer, and you’ll have something that looks like this:

5. Duplicate your layer and then rotate it so you have a “cross-hair” design on your document:

6. Now use your Rectangle Marquee Tool to make a selection of your entire document. Then navigate to Edit>Define Pattern. In the dialogue box that appears name it grid and then return to your template document.

7. Create a new layer above your background layer and name it “Grid”. Next go to your Tools Palette an find your Pattern Stamp Tool (S). Using a large brush go to your Pattern Picker and find your Grid Pattern. Then proceed to brush the entire document with it. You’ll have something that looks similar to the following:

8. We want to add a little more detail to our grid, so to do so we will add a slight drop shadow using our blending options. Right click your Grid Layer and choose blending options from the drop down menu.

9. For our header we want to start off by using our Rectangle Marquee Tool (M) to create a shape similar to the following with a fill of #232323.

10. Next select your layer and hit Command+G on your keyboard to place it in a new group. Name this group header. We then want to add a layer mask to our group by choosing the layer mask icon from the layers palette.

11. Locate your Brush Tool (B) and select one of the default splatter brushes (14px, or 24px) from the brush palette. Then go to your Brush settings and insert the following:

12. Select your Mask from your grouping and proceed to paint with black along the bottom of your headers background to give it a similar effect to the following:

13. On your mask layer again, go ahead and make a selection similar to the following and fill it with #000000. We need to do this so in our next step our paper texture gets masked.

14. Grab your paper texture from the resource list above, and place it on your document above your black header background layer. The texture we are using isn’t wide enough, so we want to duplicate our layer (Command+J) to fill the extra space. Don’t worry if there is a seem, we won’t be seeing that soon!

15. Select both of your paper textures layers and merge them together. All that is left is to change the blend mode to Multiply and you’ll have something that looks like this:

16. For our logo I used the font Sketch Rockwell (listed above). The first color is #FFFFFF, and the second blue color is #7EC5EE. For our navigation I used Helvetica with white text. Then added a simple #4C8FB6 colored Rounded Rectangle with a radius of 10px. That is it for our header, what do you think?

17. Next we are going to move onto our featured photo area. To keep things organized lets go ahead and make a new grouping (Command+G) without anything in it and name it “Featured”.

18. Similar to how we created our header in Step 9, we will use our Rectangle Marquee Tool (M) similar to the following and fill it with #232323.

19. Create a mask on your Rectangles layer by choosing the Mask Icon in the layers palette. Using the same method we used to fray the edge of our header in Steps 11 and 12, achieve a similar look to the following:

20. On a new layer, use your Rectangle Marquee (M) to create something similar to the following and fill it with #FFFFFF. This will serve as a border for your image.

21. To provide users with an option to flip through featured images, we need arrows. Using your Elliptical Marquee (M) make a circle similar in size to the following and fill it with #232323.

22. For our arrow we want to use our Rectangle Marquee Tool (M) to create a small #FFFFFF box. Then select the top right corner of the box and delete it. You’ll be left with something that looks like this:

23. All that is left is to rotate it and resize it to how you see fit. I did the same for the right side, and then added an image and my featured box looks something like the following:

24. For the content area we will be doing almost the exact same thing we did for the featured area. You should be able to get to this point from following Step 18.

25. The difference here is that we need to add a place for an image title. To do this we want to use our Rectangle Marquee Tool (M) again and create something that looks like the following with a fill of #232323.

26. Lower your layers opacity to about 81%, and then proceed to add the following blending options onto your layer:

27. Add some white text for a title and your content area will look something like this after repeating the process a few times.

28. The footer is exactly the same as the header, except flipped. Drag your Header Folder (or grouping) onto the new layer icon in the layers palette to duplicate your group. With your copied grouping selected, go to Edit>Transform>Flip Vertical. Then move it down to the bottom of your document.

29. Delete all the layers in the footer except for your background and your texture layer. You’ll be left with something similar to this:

30. All that is left is to add our logo to the footer, and then add our navigational items. I used the color #7FBBDD for my links this time, and then #FFFFFF for the copyright text. When it’s all said and done your template will look something like this:

Create a Theme Store Website Layout in Photoshop

Matthew Heidenreich — Thu, 29 Apr 2010 05:00:49 +0000

Final Result

Tutorial Resources

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 to the color #D7D7D7.

3. We will then begin with the container that will house our login information at the top of our page. Using your Rectangle Marquee Tool (M) make a selection similar to the following and fill it with #000000.

4. Next we want to add some blending options to our newly created layer. To do so right click your layer in the layers palette and choose Blending Options from the drop down menu.

5. Our login field is next. Make sure your foreground is set to #313131, and then sing your Rounded Rectangle Tool (U) with a radius of 3px create a rectangle similar to the following. This will serve as your input box for your login form. The input text color is #FBFCDD. You will use the same method for a password field.

6. For the sign in button we want to use our Rounded Rectangle Tool (U) again with a 3px radius and make a rectangle that looks similar to the following:

7. Add the following blending options to your layer:

8. Add some text to your layer, in this case “sign in” and it will look something like the following. You can then duplicate the styles for a register button as well.

9. Using your Rectangle Marquee Tool (M) again, we want to make the background for our header. Create a selection similar to the following and fill it with #000000.

10. Add the following blending options to your layer:

11. Go to the tutorial resources at the top of this page and find open up the Halftone Brush pack for this next step. On a new layer above your headers background layer with a white brush do something that looks similar to the following:

12. Next set your layers blend mode to Overlay, and lower the opacity to about 6%. Then add the following blending options to your Halftone layer:

13. We need to arrange where all the text links will be displayed within our header, and where our text logo will be placed. The font used in the logo is Calibri with #FFFFFF as its color. The icon is from the Milk Icon Set provided in the tutorial resources. For our links I used the font Helvetica Bold with #F7F6F6 as my font color.

14. To represent our active link, we want to use our Rounded Rectangle Tool (U) again and make a shape similar to the following:

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

16. That is is for our header, and now it’s time to move onto our search box. These layers will need to be above the header layers we just created. Using your Rectangle Marquee Tool (M) again, make a selection similar to the following and fill it with #000000.

17. Add the following blending options to its layer:

18. Next using your Rectangle Marquee Tool (M), make a rectangle that is similar to the following and fill it with #FFFFFF. Then lower the fill of its layer to 30%.

19. Add the following blending options to its layer:

20. For our search input we want to use our Rounded Rectangle Tool (U) with a radius of 10px to create something that looks like this:

21. Add the following blending options to your inputs layer:

22. All that is left is to add a search icon (i used the default magnifying glass), and some search text and your nearly complete header will look like this.

23. The last thing we need to add to this section is the category drop down menu. To do this use your Rectangle Marquee Tool (M) to make a selection similar to the following.

24. Add the following blending options to its layer:

25. Using your Polygonal Lasso Tool (L) make a triangle similar to the following and fill it with #000000. Then add your “categories” text with the color #323232.

26. For our “introduction” box, I wanted to create a similar style that themeforest uses. To do this use your Rectangle Marquee Tool (M) yet again.

27. Add the following blending options to your layer:

28. Next I added my background image. To do this I just created a black box inside our container. I then proceded to arrange some thumbnails of themes together in a rotation. Once that was complete I think merged these layers and lowered the opacity to 20%. Then all that is left is to add some text. The first and second line of text is #FFFFFF, while the third line is #FBFCDD, and the blue is #67C0ED.

29. For our featured themes box, add a heart icon from the Mono Icon Pack, and then add your heading text with the color #212121. Add the following blending options to your text layer:

30. Use the settings you used in step 26 for your introduction box, and you’ll have something that looks like this:

31. Do the same thing for a recent theme section, and then its time to move onto our footer.

32. The footer will takes after the header. So go back to step 9 until you get to this point:

33. For the headings use the color #FFFFFF, and for the description and links use the color #CADEF2.

34. The last thing we need to do is create divs between each text area. Using your Rectangle Marquee Tool (M) make a 1px wide selection and fill it with #030508.

35. Add the following blending options to your layer:

36. When it’s all said and done your template will look something like the following:

Create an iPhone App Website in Photoshop

Matthew Heidenreich — Tue, 20 Apr 2010 05:06:36 +0000

Final Result

Tutorial Resources

Lets Get Started

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

2. With your Paint Bucket Tool (G), fill your background layer with #242424. Using your Rectangle Marquee Tool (M) make a selection a little smaller than half the size of your background and fill it with white.

3. Now insert the following blending options onto its layer:

4. We want to add a slight texture to the red in our background. Command+Click on your red gradient layers thumbnail in the layers palette to make it an active selection. Then create a new layer and fill your selection with #CF5656 on the newly created layer.

5. Next we want to go to Filter>Noise>Add Noise and insert the following into the dialogue box that appears:

6. Lower your layers opacity to about 25% and you should have something that looks very similar to the following:

7. For your logo we want to use the font Creampuff from the tutorial resources at the top of this page.

8. On your font layer add the following blending options:

9. From the rising sun brush pack in the tutorial resources at the top, add one of the brushes that has the edges fade behind your logo in a similar way to the following. Lower its layer opacity to about 28% when doing so.

10. The navigation will be placed in the top right side of our layout. Using your Rounded Rectangle Tool (U), make a #000000 rectangle similar to the following. Reduce the fill to 59%.

11. Add the following blending options to your buttons layer:

12. I then added an icon from the Nexius Icon Pack from the tutorial resource list and added my link with the color #F2F1F1. For the remainder of the links I used icons from various packs that can be found within the resource list at the top of this page.

13. The right side of our template will show our iPhone preview of our app. For this tutorial I provided you with an iPhone you can place on your document, along with the AppStore badge. Using the same technique we used for adding a starburst behind our logo, add another one behind your iPhone. For the text under the App Store Badge I used Georgia with the color #C5C5C5.

14. The content area that will house the description for your application will be located on the left side of our document. Using your Rounded Rectangle Tool (U), create a rectangle will a 15px radius that looks like the following:

15. Next we need to create our content header. Right click your Rounded Rectangle Layer you just created and choose rasterize. Make a selection similar to the following of the top of your Rounded Rectangle layer and then hit Command+C and then Command+V to paste it on its own layer (you may need to align it after being pasted).

16. On your newly created layer insert the following blending options:

17. I used the Safari app icon for this tutorial, but you can place your app icon in the top left side of the content header. Using a font similar to Myriad Pro, place your text in a similar fashion with the name of your app and a little bit of a description. Make sure both lines of text are on their OWN layer.

18. Insert the following blending options onto your text layer:

19. Add the same blending options to your description text layer and you will have something that looks similar to the following:

20. We want to make a secondary pagination offering the user to view the features, screenshots, and reviews. To show our active page, we want to make a white tab that blends into our content area. To do this use your Rectangle Marquee Tool (M) and make a selection with a fill of #FFFFFF.

21. Now add the following blending options to your white tab layer.

22. Your active links will be the color #67A9CC, and your non-active links will be #323232. Arrange them in the following manner.

23. All that is left is to lay out how our content will be displayed. For our headings, I used the font Myriad Pro with the color #F88B8B. The body text is #323232.

24. The last step is to add a footer. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #141414 and then add your copyright information and any other lines of text you desire.

25. When it’s all said and done your template will look something like the following: