It has been a while since I’ve published a photoshop tutorial for
creating a web layout. Today we’re going to create a personal blog
website design in photoshop. If you’re a beginner do not worry just
check out some of my past tutorials on how to create a website design.
Now that we have our 960px wide website we will need to add title=”How to create a personal blog theme in photoshop ” to both sides of our layout so we can have some room to see our background. Press CTRL + ALT + C to bring up Canvas size(MAC: CMD + ALT + C). Then select the left arrow and change the width from 960px to 1160px. Press ok and do the same for the right side except change 1160px to 1360px.
Since we now have our guide lines setup we can now start designing our website. Select the paint bucket tool and set the background color to #212121. Double click on the background layer or right click>>blending options>>Pattern. Select one of the patterns used from pattern download.
Now we will create our header section. In our header section of the website there will be a logo, social icons and of course a menu nav. Select the rectangle tool and create a rectangle box across the top of the design. Double click on the background layer or right click>>blending options>>gradient overlay. The left color of the graident is #6aa29c. The right color of the gradient is #8fcac4.
Select the type tool, font: Arial, Bold, 72px and write out the name of your website. Next double click on the background layer or right click>>blending options>>gradient overlay. The left color of the gradient is #f7f7f7. The right color of the gradient is #d2dbda.
Then select the stroke option and add a 1px stroke to your logo. Make the stroke color #7cb5b0;
Now add in the lens icon that you’ve downloaded at the beginning of this tutorial. Once you have the lens icon in photoshop drag it over the O in Disfusion.
Now select the type tool again font: Arial, 12px color: #232323 then type out “Bringing creativity to community blogger theme!” or create your own tagline.
Since our logo is now created we can create our social network buttons. Select the ellipse tool and create a circle(Color: #212121) about the size of a quarter. Next to the circle select the type tool font: Arial, size: 12px, color: #212121, and create a verbiage for your social link. I used “Subscribe to Rss Feed” for my rss icon.repeat this step for the next social icon also.
Remember the two social icons that you’ve downloaded at the beginning of this tutorial. You are going to need them for this step. Drag in your twitter and rss icon into photoshop. Then add the appropriate icon for your two social links. After you have your icons in place,double click on the icon layer>>blending options, color overlay and set the color to #dbdbdb. Repeat the last step for the other social icon.
Select the rectangle tool and create a rectangle box across your design layout. Add the box to the bottom of the blue header. Now double click on the layer>>blending options>>gradient overlay. The left color of the graident is #212121. The right color of the gradient is #161616.
Select the type tool font: Arial, size: 14px, color:#c0c1c5 and create your menu navigation links. After you have your menu nav links created select the rounded rectangle tool and create a rounded rectangle around a menu item. After you have your rounded rectangle create double click on the layer>>blending options>>gradient overlay. The left color of the gradient is #000000. The right color of the gradient is #242424. Then add a 1px stroke, color: #161616;
Select the rectangle tool, background color #212121 and create a rectangle box to contain all of our content.
Now lets create our blog posts. Select the type tool font: Georgia, Size: 26px, color:#fff; and create a heading for your blog post (No more then 2 lines). Now lets add a image thumbnail for our post. Add a stroke of 3px inside color: #0f0f0f so it look as if a border is around it. Then select the type tool font: Georgia, Size: 14px, color:#fff; and create a excerpt of small description of your post. Repeat this step for the next blog post.
Select the rounded rectangle tool, color: #8fcac4 and create a medium size rectangle. Now select the type tool font: Georgia, size: 18px, color: #212121 and create the categories text inside of the rectangle box. Then create a rounded box color:#0f0f0f, for the widget area in our left sidebar. Now create a list of categories. Below each categories add dotted lines color: #fefefe to divide each widget/block item. Repeat this step for the next two widget/block area.
Now we will create our advertising area which will hold our 125x 125px ads. Select the rectangle tool, color: #0f0f0f, and create a background for our ads. Make sure each ad background has 5px all around making it seem as if the ad image has a padding of 5px applied to it.
Remember when we created our widget areas, well we will need to do the same for this area so that we can display our Flickr photo feed.Select the rounded rectangle tool, color: #8fcac4 and create a medium size rectangle. Now select the type tool font: Georgia, size: 18px, color: #212121 and create the Flickr photos text inside of the rectangle box. Then create a rounded box color:#0f0f0f, for the widget area in our right sidebar. Create 6 Flickr
images 75px x 75px.
For the final step of this tutorial we will create our footer divider and text. For our footer divider create a 1px line color: #1d1d1d. Now create another 1px line color:#323232 and add it to the bottom of the first line. Now select the type tool font: Georgia, size: 14 and create your copyright info. For the “back to top” link I just capitalize the text and changed the color from #fff to #8fcac4;
You now have completed the design for this tutorial. In the up and coming tutorials we will take this design and code it using html & css(3). After we have coded it to html and css we will then turn it into a working WordPress theme and also a working drupal theme. If you’re interested in learning how something like this can be done subscribe to our rss feed to stay updated.
Things you will need:Open photoshop and created a new document 960px(width) x 1200(height).
camera lens
RSS Icon
twitter icon
Now that we have our 960px wide website we will need to add title=”How to create a personal blog theme in photoshop ” to both sides of our layout so we can have some room to see our background. Press CTRL + ALT + C to bring up Canvas size(MAC: CMD + ALT + C). Then select the left arrow and change the width from 960px to 1160px. Press ok and do the same for the right side except change 1160px to 1360px.
Since we now have our guide lines setup we can now start designing our website. Select the paint bucket tool and set the background color to #212121. Double click on the background layer or right click>>blending options>>Pattern. Select one of the patterns used from pattern download.
Now we will create our header section. In our header section of the website there will be a logo, social icons and of course a menu nav. Select the rectangle tool and create a rectangle box across the top of the design. Double click on the background layer or right click>>blending options>>gradient overlay. The left color of the graident is #6aa29c. The right color of the gradient is #8fcac4.
Select the type tool, font: Arial, Bold, 72px and write out the name of your website. Next double click on the background layer or right click>>blending options>>gradient overlay. The left color of the gradient is #f7f7f7. The right color of the gradient is #d2dbda.
Then select the stroke option and add a 1px stroke to your logo. Make the stroke color #7cb5b0;
Now add in the lens icon that you’ve downloaded at the beginning of this tutorial. Once you have the lens icon in photoshop drag it over the O in Disfusion.
Now select the type tool again font: Arial, 12px color: #232323 then type out “Bringing creativity to community blogger theme!” or create your own tagline.
Since our logo is now created we can create our social network buttons. Select the ellipse tool and create a circle(Color: #212121) about the size of a quarter. Next to the circle select the type tool font: Arial, size: 12px, color: #212121, and create a verbiage for your social link. I used “Subscribe to Rss Feed” for my rss icon.repeat this step for the next social icon also.
Remember the two social icons that you’ve downloaded at the beginning of this tutorial. You are going to need them for this step. Drag in your twitter and rss icon into photoshop. Then add the appropriate icon for your two social links. After you have your icons in place,double click on the icon layer>>blending options, color overlay and set the color to #dbdbdb. Repeat the last step for the other social icon.
Select the rectangle tool and create a rectangle box across your design layout. Add the box to the bottom of the blue header. Now double click on the layer>>blending options>>gradient overlay. The left color of the graident is #212121. The right color of the gradient is #161616.
Select the type tool font: Arial, size: 14px, color:#c0c1c5 and create your menu navigation links. After you have your menu nav links created select the rounded rectangle tool and create a rounded rectangle around a menu item. After you have your rounded rectangle create double click on the layer>>blending options>>gradient overlay. The left color of the gradient is #000000. The right color of the gradient is #242424. Then add a 1px stroke, color: #161616;
Select the rectangle tool, background color #212121 and create a rectangle box to contain all of our content.
Now lets create our blog posts. Select the type tool font: Georgia, Size: 26px, color:#fff; and create a heading for your blog post (No more then 2 lines). Now lets add a image thumbnail for our post. Add a stroke of 3px inside color: #0f0f0f so it look as if a border is around it. Then select the type tool font: Georgia, Size: 14px, color:#fff; and create a excerpt of small description of your post. Repeat this step for the next blog post.
Select the rounded rectangle tool, color: #8fcac4 and create a medium size rectangle. Now select the type tool font: Georgia, size: 18px, color: #212121 and create the categories text inside of the rectangle box. Then create a rounded box color:#0f0f0f, for the widget area in our left sidebar. Now create a list of categories. Below each categories add dotted lines color: #fefefe to divide each widget/block item. Repeat this step for the next two widget/block area.
Now we will create our advertising area which will hold our 125x 125px ads. Select the rectangle tool, color: #0f0f0f, and create a background for our ads. Make sure each ad background has 5px all around making it seem as if the ad image has a padding of 5px applied to it.
Remember when we created our widget areas, well we will need to do the same for this area so that we can display our Flickr photo feed.Select the rounded rectangle tool, color: #8fcac4 and create a medium size rectangle. Now select the type tool font: Georgia, size: 18px, color: #212121 and create the Flickr photos text inside of the rectangle box. Then create a rounded box color:#0f0f0f, for the widget area in our right sidebar. Create 6 Flickr
images 75px x 75px.
For the final step of this tutorial we will create our footer divider and text. For our footer divider create a 1px line color: #1d1d1d. Now create another 1px line color:#323232 and add it to the bottom of the first line. Now select the type tool font: Georgia, size: 14 and create your copyright info. For the “back to top” link I just capitalize the text and changed the color from #fff to #8fcac4;
You now have completed the design for this tutorial. In the up and coming tutorials we will take this design and code it using html & css(3). After we have coded it to html and css we will then turn it into a working WordPress theme and also a working drupal theme. If you’re interested in learning how something like this can be done subscribe to our rss feed to stay updated.
0 comments:
Post a Comment