Design and code a layout without using slice tool
In this tutorial i will show you how to create a clean website layout in Photoshop, and then i will show you how to convert it to a real website. The coding part is available only for VIP members. Apply for a VIP account and you will see also how i will transform this PSD Layout into a valid XHTML/ CSS template without using the Slice Tool.
XHTML / CSS + PSD layout available for VIP members
Create a new document with the following size: 960 x 900 pixels. I will use a white background.
With Rectangle Tool I will create 4 shapes, and I will place them like in the following image. I will use different colors, so you can see better my shapes.
Now I will change the colors for the first 3 shapes from the top.
For the fourth shape (the black one) I will add a simple layer style. Please go to Layer > Layer Style > Gradient Overlay.
Add the following colors.
This is my result so far. In the next image you will see only a small part from this layout.
On the third layer I will add a simple drop shadow.
This is how it looks.
I will select Line Tool, and I will set the weight of the line to 1 pixel.
Then I will hold down the SHIFT key, and I will create a few lines. If you hold down the SHIFT key you will be able to draw horizontal lines very easy.
Click on the following image to see the full size layout.
Now you can select all layers in your layer palette, and press CTRL+E (this shortcut will merge all the layers into a single one)
The next step is to add other shapes. I will use Rounded Rectangle Tool to add two round shapes on the top of the layout. You can see the color codes on the following image.
For both shapes I will add the following layer style.
Layer > layer style > Stroke…
This is my result.
On the bottom of the layout I will create other shapes. One with Rectangle Tool, and another one with Rounded Rectangle Tool.
For the round shape I have used the following color: #f0f0f0 and I will add also the layer styles I have used a few steps ago.
And for the black shape I will add the following layer styles.
This is my result so far. Click on the image to see the full size layout.
On the top of the layout I will create a button with Rounded Rectangle Tool.
I will add the following layer styles.
This is my result so far.
I will right click on the layer inside my layer palette, and I will choose Rasterize Shape.
Then I will select Polygonal Lasso Tool, and I will make a selection like in the following image.
I will assure I have the button layer selected, and I will press on Delete key from my keyboard.
I will press also CTRL+D to deselect.
I will duplicate a few times (press CTRL+J) to duplicate a layer. Then with Move Tool I will place the buttons like in the following image.
For the first button I will change the layer styles.
This is my result so far.
Now I place some text and images. This is my final PSD layout.
I hope you like this layout. If you want to see how I will convert this tutorial to a XHTML/CSS please apply for a VIP account and you can see further a unique method on how to transform a PSD into a valid XHTML / CSS website without using Slice Tool.
To understand all the explanations, you’ll need to have some knowledge of web techniques:
A solid knowledge of both HTML and CSS is strongly recommended.
Please note that this tutorial will show you the technique used to create a website from a PSD file. Most of the steps in the following tutorial are repetitive steps and are shown only a single time.
Apply for a VIP account to download a PDF file with the rest of the tutorial
Here you can download the rest of the tutorial in two different formats : PDF + Word
The cisco training was never that easy before our professional tutorial packs. You can buy most important ccna exam questions from our site. Free website access to dumps and simulations of mcdst exam is provided to our members.
Responses to “Design and code a layout without using slice tool”
Trackbacks
- Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog
- 70000 Items for designers - Unlimited downloads for 9.95 $ | Grafpedia
What fonts do you use at “We create hq wp themes” in italic?
Nice job, thanks for sharing your way of work.
I´ve got a question, can I call a .swf file at url() functions?
Thank you
Myriad Pro – Condensed – Italic , or you can use also Verdana , Italic
nice work, thanks for the tut..
Can never have enough of PSD-HTML tutorials, thanks.
Featured here: http://www.presidiacreative.com/web-picks-23/
Looks wonderful! Very clean and professional. I really like the gradient effect on the background. The maroon is a nice accent color too and contrasts well with the gray! Thanks for sharing this, looking forward to more of your wonderful works!
Awesome tutorial
Nice step by step tutorial really it’s very easy to follow
Thanks so much for your kind effort for making Awesome Web layouts tutorial for us
your all web layouts & your all tutorial are excellent
Please keep them comming
I learn so much for you
Thanks a lot
keep up good work
God bless you
Best tutorials for photo shop beginner
Thanks
Looks very good.
:_: i though i could see how to deal with code on that tuts… but this is very amazing… i love your site and the tuts…
Please give us any trace for part 2 of that tutorial? I do not want to loose 10$ for VIP account if that is not worth that. What magic is used for that unsliced transform from PSD to HTML?
the second part of the tutorial show you how to convert a PSD file into a valid website, and you will learn how to position the graphic files with absolute positioning.
I have searched all over the internet for such a tutorial, and believe me it does not exist yet.
If you think you will loose 10 $ then i recommend you to use the old method
which “old” method?
so for the 10 bucks, that sure is an amazing amount of files you’ve made available.
but, I initially registered on the promise of a second part of this tutorial.
“If you want to see how I will convert this tutorial to a XHTML/CSS please apply for a VIP account and you can see further a unique method on how to transform a PSD into a valid XHTML / CSS website without using Slice Tool.”
when I go to download, i get the html/css and a psd, but no tutorial?
is the tutorial supposed to be looking at these files?? or is something missing?
thanks. great site.
We have changed the layout yesterday, and right now we are still moving some content to the new vip area.
Please take a look tomorrow in the VIP area (http://www.grafpedia.com/vip-area/) and you will find the second part of that tutorial.
I am really sorry for this delay
Hi Brian. The second part of the tutorial is available in your VIP area. PDF and word format are available
Thank you
Razvan
Hi, can you give me a link to the PDF explaining how to code the layout? I can’t find it in the VIP section and the download gives me HTML, CSS and PSD but no PDF.
Thanks
Pen
Hi Penelope. you will find the link in VIP-Area. It is on the front page. Try to search ” pdf “