Design a creative cosmetics layout with Photoshop
In this tutorial I will show you how to create a beauty layout based on some strange shapes. This PSD layout is aimed for building websites related to healthcare, medicine and health issues. It can be used for massage spa salons, spa resorts, body spa and facial spa accessories, spa equipment too.
Register to download this layout
I will start this tutorial with a new document with the following background: #ecece2
I will grab my Pen Tool and I will create 2 shapes like in the following image
For both shapes I will add the following layer styles
This is the result so far.
I will duplicate the big shape, and I will resize it
I will flip the shape horizontally (Edit > Transform > Flip Horizontally)
I will place a stock image with a lipstick right under these shapes
Create a new layer (press on CTRL+SHIFT+ALT+N) in the same time. With Brush Tool I will draw a strange drawing. Be sure you use a proper brush when you try to create this drawing.
Now it is time to add some floral designs. If you remember a few days ago I have released a pack of vector swirls… You can download them from here: Vector swirls
Open the EPS file inside Photoshop, and then make a selection around the floral swirls you want to use. You can use Rectangular Marquee Tool.
Be sure you have the layer selected, and then press on CTRL+J (this shortcut will create a new layer via cut). You will notice another layer on top of the original one. Please select it, and then drag it to the PSD layout. With the same technique you can add as many flowers you want over our beauty layout.
Please click on the image to see the full size beauty layout.
Now it is time to add some text with Horizontal Type Tool
Between text areas I will place some lines. You can use Line Tool
On the bottom of the layout I will create some round buttons. I will create 4 shapes with Ellipse Tool
You can see that I have used the same layer styles like I have used for the big shape. Over these circles I will add some icons
On the right side (in the sidebar of the layout) I will create another shape with Pen Tool
Here you can showcase some of your best beauty products. It will be a slide show. If you know something about jQuery I am sure you will not have problems to implement a simple
slide show.
I will add another stock image with some make-up images. This is my final result
To understand better how this layout was made please apply for a VIP account, and download this layered PSD file, alongside our entire collection of VIP files (over 30.000 items right now)
Responses to “Design a creative cosmetics layout with Photoshop”
Trackbacks
Leave a reply
-
Web design jobs- Nonpublic project #609030 by SeoWebLogix
- Blog writer by acerothstien
- Fading pictures and flash navigation by wiliss87
- Banners for musicshops by BasepointMedia11
- Video Views by marcuskw
- Private Project PTJ 13 - WebGallery Only by simonix
- Private Project PTJ 12 - WebGallery Only by simonix
- php guys needed by Pascal79
- Joomla template purchase and integrate by bnmagic
- W3C validated xhtml conversion with script integration by begwise
-
That’s definitely an unconventional layout – but interesting, and could work very well!
Thanks
Very creative. Taking a different approach to the standard model of a website. Very eye-catching.
Great job
That is so nice, thank you, not only the idea, but the details of styling every element is important
thanks
صور بنات
I would appriate it if you can convert it to a xhtml+css webpage.Can u write a tut for that? Anyway this is also a great tutorial.ths
I like the layout but I think the colour scheme is very masculine.
And who wears orange lipstick??! I can’t believe that any cosmetic range would have a shade of orange like that. The heading looks great with a lipstick background but I think a pink or red would suit the purpose better.
We have already a tutorial on how to convert any PSD file to an valid CSS/ xhtml website:
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
Thanks Christina for your remarks. You have perfectly right. Nobody will wear a orange lipstick. This is the last time when i create a “girl layout” LOL
Oh dear! Please don’t take my comments to heart, I think the layout is good and I really like these posts that you do. Just be careful when choosing feminine colour schemes
Very good lesson and very light!! Thanks
I know. I will take care next time. Thank you Christina
Pretty interesting design.
I’d wear orange lipstick
looks wonderful, you are perfect:) thanks for the tut..
Thats a great Designing type, i find it impressive. Thanks for the tutorial