• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Monday, 13 Apr 2009 04:49

This will be your final result

1. The first thing we want to do is to create a new document with the dimensions of 1024×1100. Your height may vary, but i used these dimensions for the purpose of this tutorial.

2. Next, we want to go ahead and add in our background. I used a great stock image I found on deviantart here. The images aren’t large enough, but just go ahead and scale them to fit your document. Or you can download the PSD at the bottom of the tutorial, and get the image from there to save you the step.

3. The first thing I would like to do is to create a simple logo. Using the font Helvetica, I used #000000 for “Vicinity and set it to bold, and used #D75160 for the “Designs” while keeping its font styling to Regular. You should have something that looks like this

4. Now we want to add a little tagline to our logo. Using your Rectangle Marquee tool make a selection similar to the following and fill it with #FFFFFF

5. Lower the opacity of your layer to 90%, so it will blend better with the background. Then go ahead and add some text in your newly created box. I used the color #64685E

6. Next we want to add a spot for you and your clients to login. On the right side of your template we want to use our Rectangle Marquee Tool again and make a selection similar to the following and fill it with #000000.

7. Lower the opacity of your layer to 30%, and then add some text on top of it similar to the following. Make your text color #FFFFFF

8. Next we want to move onto our navigation. Using your Rectangle Marquee Tool again make a selection similar to the following and fill it with #000000

9. We now want to lower the opacity of that layer to 70% to give it a nice transparent feel on our colorful background.

10. Now lets show how our links will be displayed. For each link we will have a description under it to keep it fun and friendly. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #303130.

11. Change the blending mode of your square to Soft Light and then we can go ahead and add some text. For the link I used the color #FFFFFF, and for the description I used #FFFFFFF, but just lowered the opacity of the text layer to 50%.

12. Go ahead and repeat those steps to create all the navigation links you’ll need. For my active link I used #3CC1F9 instead of the white.

13. With the extra space on the end, you can go ahead and add some options for users to subscribe to your RSS Feed. Just add some simple white text, and add your RSS icons and your document will look something like this by now

14. Next we want to move onto our content area. Using your Rectangle Tool we want to go ahead and select out a background for our content. So make a selection similar to the following and fill it with #FFFFFF

15. First lets go ahead and add a heading for our blog area. I chose to use the words “Latest Articles” with the color #000000 and set to bold. I then used the color #3B3A3A for the - - - - - - - - - - - - under my heading. You should have something like this

16. Now lets make a search bar. Having fun yet? Using your Rectangle Marquee tool again make a selection similar to the following and fill it with #000000

17. Now insert the following blending options onto its layer by right clicking its layer and choosing blending options from the drop down menu


18. You should have something that looks like this

19. Next we need to make a button for our search box. So using your Rectangle Marquee again make a selection similar to the following and fill it with #000000.

20. Now insert the following blending options onto its layer


21. Now go ahead and add some white text on top of your button and you should have something that looks like this. (note. I added a little white border around the edge, but that is optional)

22. Now go ahead and add some witty text in front of your text box and your document should look a little something like this

23. Lets go ahead and start with our sidebar shall we? The idea is to keep it simple. We want to go ahead and make a heading for our “Recent Posts” box, so using your Rectangle Marquee Tool make a selection similar to the following and fill it with #D65863

24. Now pull out your Text Tool and add the text “Recent Posts” in #FFFFFF.

25. Next use your Polygonal Lasso Tool to make a little triangular bullet and fill it with #000000. Then go ahead and add some text next to it to represent a post. For the link I used the color #2E92BC

26. Now just repeat those steps and you’ll have something that looks like this after about 5 links

27. The last step for the box is to add a 2px high border on the bottom. Use your Rectangle Marquee to do this and fill it with #000000. Lower the opacity of that layer to around 10% and it will look like this

28. Now i just repeated those steps for a Recent Comments box, but changed the back of the heading to #B7D8CF. Your document will look something like this

29. Now its time to make our post list. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #F1F1F1.

30. Next we want to make a nice rounded box where our thumbnail will be for each post. So using your Rounded Rectangle Tool with the radius set to 10px, make a rectangle similar to the following (doesn’t matter what color, we will be changing it)

31. Now on your newly created Rounded Rectangle, insert the following blending options


32. I went ahead and added a thumbnail from our site in there as an example and it will look something like this

33. Now all thats left is to use your text tool to lay it out something like the following. For the calendar icon, I used a pack you can find at this link.

34. We want to have every other post with a background, so on the second post I did not add a background, and changed the calender icon to one of the others in the pack. You’ll have something that looks like this

35. All that’s left is the footer (about time huh?). Go ahead and use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000

36. Now lower the opacity of your newly created layer to about 70%, and then just add some text in a similar way to the following

That’s it! When your all done, your template should hopefully look something like the following

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.


Get a commercial/public use licence for this PSD (More info)

Author: "Matthew Heidenreich" Tags: "Photoshop, blog, clean, colorful, layout..."
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 09 Apr 2009 17:45

Welcome to the first PSD to XHTML/CSS tutorial here at psdvibe. We will be converting our most popular layout, Corporate Wordpress Style layout into valid xhtml/css which will be cross browser compatible.
Create a html file through Dreamweaver and choose XHTML 1.0 Strict.dtd from the doc type option - save it as index.html.

Create a CSS file through Dreamweaver and name it style.css - you can either place it in the same folder as your html file, or you can make a separate folder - I prefer a separate folder so I am saving my file in “scripts” folder.

Link the Stylesheet with your html document. We will only need a single stylesheet for this tutorial, but in most cases IE6 & 7 tend to mess around a bit so I always create separate stylesheet for them so we can sort out problems related to those browsers- the screen shot below will show you how to add those so that only the browsers they are intended for uses them.

Note: we have to reset our margin and padding if we want to completely control our layout without the interference of automatic margin and paddings which some elements posses so either attach another css file mostly known as reset.css (you can google it) or you can copy the code below in your CSS files

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
	margin:0;
	padding:0;
}

ul{
	list-style:none;
}

fieldset{
	border:0;
}

Create a folder named as “images” - all your images will go in this folder.

Ok all the base files are now complete - lets open up our PSD and before starting to cut it up we can study the design and plan a bit how we are going to do this. This design looks straight forward to me there aren’t a lot gradients in it most parts are solid colors so we won’t have to make a lot of slice. Ok then let’s start our conversion.

Our design consist of a fixed width content area- which will be fluid in nature (which means will extend in height according to the content in it. The only parts which are extending in width vise are header and footer - they will be extended across the screen no matter what resolution you are in.

So let’s slice the top part which will be across the screen. Please see the attached screen shot below of how I made the slice. There are 2 types of slice tools one is with the arrow other one is without the arrow. For slicing the first one in the list (without the arrow) will be used, after the slice is made when you will hover over the slice the slice tool will become selection slice tool - you can double click the slice to see its properties - give the slice its name you can see that the width of the slice is only 1px that’s because we will be repeating it through CSS. Go into File > Save for web & devices - from there click the selected slice - choose the image type you want it to be saved in and click save. Save it in the images folder.

Note: you can continue and make all slices in one go - and then carry on to create xhtml/css - its upto you how you prefer it. I will be doing it a bit differently I will be creating slices as I go along because I use the slice tool as measuring through different elements (could sound unorthodox - but it works for me)

Open your index.html file and styles.css file in dreamweaver choose the code view for both the files. (you can write the title of the page and meta description to your requirement - I am skipping that part)

Now what we have to do is make that top part of the page to expand from left to right - we already created the slice for it now the CSS comes into play, assign the background to the body selector in CSS after selecting the image type repeat-x so it repeats horizontally across the screen. We will also give the background color of the whole layout in this selector use your color picker to get the color of the background of the layout and give its value before the background link.

body {
position:relative;
background:#383d43 url(../images/body_bg.jpg) repeat-x;
color:#000;
font:62.5% Myriad Pro,Arial,sans-serif;
}

Note: there are other styles as well in the body selectors apart from ‘background’ these syles are common styles which will be common across the body of the page.

Now check in the browser you can see the top bar is there and the background of the whole screen has the same background color as are layout.

Now lets move onto the content - the layout is 943px wide. And it will be centered align in the browser. So we will create a div called ‘wrapper’ you can name it what ever you like - but as it behaves as a wrapper around the whole content so we can use that name. We will set the margin: 0 auto; so it aligns in center. It will automatically calculate the margin from left and right.

#wrapper{
width: 943px;
padding: 0px 0px 0px 1px;
margin:0 auto;
}

Note: though the content is 943px wide but we need the width to be 944px so it has the same difference from left and right. To make the width 944px we won’t increase the width itself, we will increase the padding 1px either from left or right because horizontal padding is added into the width of the div in our case by giving 1px padding from left our wrapper div will have 944px width.

Now the wrapper which will wrap our content is done lets make header - logo and search elements on our page. For header lets calculate the area (as already mentioned I use slice tool to calculate - you can use other ways) which is 65px high and 943px wide. Make a div for it - there are two elements in the header the telephone-number and the top navigation. Both have margins from top - left and right. So I would prefer that we give padding to the header div instead of those elements. Please see screen shot of how i measured that. Do keep in mind that after giving the padding you will have to adjust the width and height accordingly. Now write styles for the text and top navigation like this.

your styles will look like this

#header{
width: 886px;
height: 49px;
font-size: 14px;
padding: 16px 35px 0px 22px;
}

#header p{
float: left;
color: #525961;
}

#header span{
color: #bababa;
}

#header ul{
float:right;
}

#header ul li{
float: left;
margin: 0px 12px 0px 0px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}

#header ul li.no_bg{
background: none;
}

#header ul li a{
color:#fff;
}

Your html will look like this.

Now slice the logo and the search button - take measure of the input section and write styles for them.

#logo{
display: inline-block;
width: 255px;
height: 34px;
float: left;
clear: both;
margin: 0px 0px 0px 21px;
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
}

form{
float: right;
}

input{
width: 171px;
height: 17px;
float: left;
padding: 5px 10px;
color: #a0a4a8;
border: none;
}

input#submit{
display: inline;
width: 66px;
height: 27px;
float: left;
margin: 0px 5px 0px 4px;
background: url(../images/search_button.gif) no-repeat;
}

Note: mostly people place logo as image in html or wrapped in a H1 tag which I don’t think is good for SEO - your xhtml should only have one H1 for SEO reasons and an image in an H1 tag won’t help that cause. So you can see in my styles how I have placed logo as a background image so search engine find it as a text not as an image.

Now lets slice the banner and put it in the banner div - you can put that image without the banner div if you want.

By now your html will look like this.

Now the fun part of making the main navigation of the website. Make a slice as shown in the image. Please note that the navigation container has gradient and left-right-bottom border as well (the top one is with the image) so make a slice of the navigation container background with the bottom border included. And give the left and right border using CSS. You could give the bottom border using CSS as well. But for some reason I chose not to. Give padding according to the requirement.

your style sheet will look like this.

#navigation{
width: 926px;
height: 52px;
float: left;
padding: 12px 0px 0px 15px;
background: url(../images/navigation_bg.jpg) repeat-x;
border-left: 1px solid #43474b;
border-right: 1px solid #43474b;
}

Now lets create that navigation. The navigation blocks have blue background which has a gradient make a 1px wide and full height slice of it. And implement it in CSS as seen below. A little overview of that how its done. The list item <”li”> are floating left and in the <”li”> items there is <”a”> tag which is doing the job of shaping that background. The <”a”> tag is behaving as an block element in which the background image is repeated horizontally and given necessary padding so it looks just like the PSD.

your CSS will look like this.

#navigation ul li{
display: block;
float: left;
height: 41px;
}

#navigation ul li a{
display: inline-block;
color: #cbd9e7;
height: 29px;
font-size: 14px;
padding: 12px 24px 0px 24px;
text-transform: uppercase;
}

#navigation ul li a:hover{
text-decoration: none;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

#navigation ul li.active a{
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

Your html will look like this.

Lets move onto the main text area. You can see it’s a two column design and the background of both the columns are seamlessly together. Either the left column has more content or the right column has more content both the background should be parallel to each other. So firstly make a div called content. Make a slice from left to right of the content area. Which will be 1px in height and 943px wide (this could have been done in a different way as well of just making the slice of the right column background and positioning it to right and giving the background-color of the left column in the content div) though I just made it a one whole slice at the moment which is repeated vertically.

Now lets make a left column div and a right column div both will be floated left and wont have any backgrounds as we already gave backgrounds in the content div. you can see there styles below.

#content{
width: 943px;
float: left;
background: url(../images/content_bg.jpg) repeat-y;
}

#left_column{
width: 620px;
float: left;
}

#right_column{
width: 288px;
float: left;
padding: 18px 18px 0px 17px;
}

Your html will look like this.

Now lets concentrate on the left column at the moment. Make a div called “text” this will be a “class” rather than an “id” because in strict document only a class element can be duplicated. If you duplicate the “id” element the document wont remain valid any more. So its better to use class elements for the items you think you will be using again. Take measurement and write its style again you can either give padding to the div or margins to the elements in it. Write styles for the elements as well. <”h2″> - <”p”> - <”img”>.

.text{
font-family: Helvetica, Arial;
width: 552px;
float: left;
padding: 32px 38px 22px 30px;
}

.text h2{
font-size: 24px;
float: left;
margin: 0px 0px 12px 0px;
color: #fff;
}

.text p{
color: #bcc4c7;
width: 552px;
float: left;
clear: left;
font-size: 12px;
}

.text p img{
float: right;
margin: 0px 0px 0px 20px;
}

.text a.continue{
position: relative;
color: #65b8f9;
float: left;
clear: left;
font-size: 15px;
margin: 30px 0px 0px 0px;
}

your html will look like this

Now the second block of text has different background and top and bottom border as well. So lets make another class named “alternative” and give background and border syles in that.

.alternative{
background: #2a2d32;
border-top: 1px solid #26292e;
border-bottom: 1px solid #26292e;
}

html will look like this.

Now all the 3 blocks of text implemented in the left column div your html will look like this.

Lets move onto the right column. Measure it up give necessary paddings from left and right. Now the heading background will be the only thing used again in the right column so make a div through class and write it styles - padding etc.

.heading{
width: 260px;
height: 29px;
float: left;
padding: 12px 14px 0px 14px;
margin: 0px 0px 18px 0px;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

.heading h2{
font-size: 17px;
color: #ffffff;
float: left;
font-weight: normal;
}

.heading img{
float: right;
margin: 3px 0px 0px 0px;
}

The advertisement blocks are in <”ul”><”li”> list so make a class for ul give width and height of the blocks and float the list to left - give necessary margin. Please see the screen shot below for more understanding.

ul{
float: left;
margin: 0px 0px 39px 0px;
}

ul.sponsors li{
display: block;
width: 125px;
height: 125px;
float: left;
margin: 0px 0px 0px 10px;
background: url(../images/advertise.jpg) no-repeat;
}

Again the heading is repeated so copy that div and paste it beneath and change the text for the heading. Make styles for the list

ul li{
font-size: 14px;
color: #ffffff;
margin: 0px 0px 17px 11px;
}

ul li span{
color: #65b8f9;
}

Note: the third heading has a background as well. That’s an image floated to right.

Your html will look like this.

Now lets move to the footer. The footer is across the screen so this wont come in out wrapper div which you remember is only 944px wide. And we need the footer to be of 100% width. So we measure the height of the footer and write styles for it give the background. The footer has a top border too which is of different color but not that much of a difference. But I will still write styles for this as I don’t want any details to be lost in the design.
Now lets make a footer container which will be 943px in width and margin set to auto so it aligns in the middle. The navigation is floated to right same as the copyright text. The styles are same as the header navigation so you can copy that and rename the div.

#footer{
width: 100%;
float: left;
clear: both;
height: 120px;
border-top: 1px solid #3c4249;
background: #1e2329;
}

#footer_content{
margin: auto;
width: 943px;
padding: 46px 17px 0px 0px;
}

#footer_content ul{
float: right;
margin: 0px 0px 10px 0px;
}

#footer_content ul li{
float: left;
margin: 0px 0px 0px 12px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}

#footer_content ul li.no_bg{
background: none;
}

#footer_content ul li a{
color:#fff;
}

#footer_content p{
float: right;
clear: right;
margin: 0px;
font-size: 12px;
color: #383d43;

Your html will look like this.

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

 
Get a commercial/public use licence for theses files (More info)

Author: "Saad Sarfraz" Tags: "Photoshop, coding, css, xhtml"
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 29 Mar 2009 15:20

17

22

32

42

52

62

72

82

91

101

111

122

131

141

151

161

171

18

19

20

If you know of any other good free stock photo websites that offer quality images, please be sure to let us know in the comments.

Author: "Matthew Heidenreich" Tags: "Resources, download, free, stock photo"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 24 Mar 2009 23:28

Design studio web page

Design Studio Web Page Layout

Learn how to make a dark and professional looking design studio web page layout. With this step by step tutorial that is easy to follow.  The PSD is available with this tutorials as well.

Design A Fresh Blog Theme On The 960 Grid

Design a Nice Blog theme on the 960 grid

In this tutorial I’ll show you how to mock up a fresh looking blog theme in Photoshop that is designed to be used within the 960 framework. This tutorial was designed more for web design theory than Photoshop technique. It is for that reason that I don’t go into great depth on each Photoshop step, but spend considerably more time on design theory and application. Photoshop beginners may find it somewhat tricky to follow along.

Create a Photoshop template for Drupal or Joomla

Create a Photoshop template for Drupal or Joomla

Learn how to make a bright and vibrant photoshop template that could be used for your Drupal or Joomla theme.  The only downside is that you have to pay for the psd files.

Car layout 4

Dark and Simple Car Layout #4

In this tutorial were going to be making a stylish car layout, although the layout isn’t particularly car “related” it does featured some awesome content box styling.

Web Design Layout 9

Simple Wood Web Design Layout #9

Another tutorial by the hv-designs team and  in this tutorial il show you how to create a web design layout, currently the 9th one in there our tutorial database.  I personally enjoy the wooden header effect.

Portfolio Layout 10

Light Colored Portfolio Layout #10

In this tutorial were going to be creating a simple straight to the point portfolio. Ive had tons of emails requesting for a portfolio layout. So here it is.

Hosting Template

Website Hosting Template Layout

In this Photoshop tutorial, they will show you how to create a unique and professional hosting template. This tutorial goes through the steps to create a website header, footer and content area.

Awesome Enterprise Layout

Create an Awesome Enterprise Layout

You will create a tutorial for a WordPress Style design or for a company layout.   You can use this
layout in different ways if you modify it a little to your own liking.

If you know of any web design tutorials that were posted in March that are worth putting in the list, please let me know in the comments and i’ll add them!

Author: "Matthew Heidenreich" Tags: "Resources, layouts, march, tutorials, we..."
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 22 Mar 2009 21:07

This is your final result

1. The first thing we want to do is create a new document. For this tutorial I used the dimensions 1024×998.

2. Using your paint bucket tool fill your background layer with #155281.

3. Next use your rectangle marquee tool to make a rectangle similar to the following and fill it with #0D3D62. This will serve as the back of our navigation.

4. We want to add a little ’shine’ to the bottom of the horizontal nav menu. Using your rectangle marquee tool make a 1px high selection at the bottom similar to the following and fill it with #FFFFFF

5. Go ahead and change the blend mode to Soft Light and then lower the opacity to about 61%

6. Using your text tool go ahead and add some links in a manner similar to the following. I used Helvetica for the links, with the color #F0F8B9.

7. Next we want to make a search box. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.

8. Now insert the following blending options onto its layer

9. Then go ahead and add some text to the search box, and the I used the search icon from the diagonal icon pack.

10. The last thing for your navigational menu is to add a logo. Using your elliptical marquee tool with a feather of 10px, make a selection similar to the following and fill it with #FFFFFF.

11. Next, we want to add a layer mask to this layer. Make a selection similar to the following and click the layer mask icon in your layers pallet.

12. Make sure the ‘link’ between the mask and the layer is unlinked. And then lower the opacity to 59% and change the blend mode to overlay.

13. For the font I used Prototype and used the following blending options

14. It will look something like this

15. Using your Rounded Rectangle Tool with a radius set to 10px, make a rectangle similar to the following

16. Under the layer you just created, we want to add another rounded rectangle similar to the following. This is where all your footer information will be.

17. Now insert the following blending options onto that layer

18. Now its time for our Sidebar. Use your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.

19. Now insert the following blending options onto its layer

20. Using your Polygonal Lasso Tool make a selection similar to the following and fill it with #0E161D


21. Then do the same thing for the bottom and it will look like this

22. Now I went ahead and added some ‘filler’ content. For the headings (ie. Sponsors, Categories, Top Commenters), I used Helvetica with the color #E3E3E3. For the background of the categories links, I used #222F38, and for the text I used #8BCEF0

23. Next lets go ahead and lay out our posts. Starting with the date box, use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000 and place some white text over it.

24. Then go ahead and insert the following blending options onto its layer

25. Use your Rectangle Tool again to make a rectangle similar to the following and fill it with #2B3236 and place the text for the month and year over it.

26. Next go ahead and add some text for your title, and then a bar under it for tags and author information.

27. I used the following blending options for that bar

28. I then added in some filler text and then added a bottom bar to display the amount of comments in the post.

29. I used the following blending options for the comments bar

30. The last thing to do is to add the footer information. It’s pretty straightforward when it comes to this. For the back of the link boxes I used #051E32, and #9EA8B1 for the text.

31. Thats it! When your done it should look something like this

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

 

Author: "Matthew Heidenreich" Tags: "Photoshop, blog, download, layout, psd, ..."
Comments Send by mail Print  Save  Delicious 
Previous page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader