Create a beauty layout in 10 steps
Beauty Layout
In this tutorial I will show you how to create a layout for a beauty salon in 10 simple steps.
These types of layouts do not have too much text.
One of the most important part is the stock image used in this type of layout. I will try to create this layout in a few simple steps.
When you create beauty layouts try to use round shapes.
I will start with a new document with a white background, and with the following size 960 x 900 pixels.
I will add a stock image on my layout
Sometimes it is very good to place the image first and you can create the layout based on your image.
I will select Pen Tool, and I will create a nice curved shape. I will use the following color #ff9300
Then with the same tool I will create another shape
For the last time I will create another shape with Pen Tool
I will select Ellipse Tool, and I will create a simple shape on the right side of the layout
I will select all layers with the curved shapes, and I will press on CTRL+E to merge them into a single layer.
Over the ellipse shape I will add some text and lines
Then in the middle of the layout I will add another text buttons
Then I will add on the bottom of the layout some images and text
Then I will add some circles on the middle of the layout, near the text buttons
Then in the middle of these small circles I will add other ones with a white color
This is my final result. I wanted to show you that you can create a website in 10 steps, and sometimes the most important part when you create a layout is the stock image used
Apply for a VIP account and download ALL our premium resources: PSD layouts for each tutorial, vector files, Photoshop brushes, Icons, Photoshop gradients, etc…
Responses to “Create a beauty layout in 10 steps”
Trackbacks
- Stwórz świetny layout od podstaw - 26 niesamowitych tutoriali Photoshopa | Webdesigner blog
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine
Really nice layout… thanks!
great tutorial..great work …..thanks
wow! this is great tutorial, thanks very much! I’v submitted a link of this article to our website WebmasterClip in order to share it with more people.
NICE.. keep up the good work mate
It’s Great Thank for u r Tutorial
A really beautiful result. Thanks for sharing this tutorial.
Great tut
I like the stock photo very much – as you said it is the anchor for the whole page. It would be nice if you could come up with more detailed explanation like the fonts used and other tips in touching up the Pen Tool effects etc
In my next tutorials i will write more detailed infos about how to use the Pen Tool
Looks great!
One thing I’m wondering (since I’m a greenhorn): how do you convert it into a website from here? Per “Cut and Slice”? Or maybe cuting out the elements as single images and positioning them with the help of using absolute positions?
Sorry for the question since this place is meant to be for experienced professionals only…
Thanks
Phil
Great Tut Mate,
But It would be wonderful if you would also publish the coding (CSS, HTML) along with the PSD tutorial. Beleive me your site will be the most happing on web world by over night. Think ’bout it, mate!
it’s a nice job
and i want to ask same quastion of shyam kumar
i till wait for that
o.k thanks………….
We have already a tutorial on how to transform a PSD to xhtml/css website :
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
The coding part is available for VIP members only.
Thank you
Its really wonderful step by step tutorial for making a beautiful lay out on this PSD XHTML and great tutorial too…..