Design a creative cosmetics layout with Photoshop

Tutorials, Web layouts 16 Comments

Tweet

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.

Preview full size layout

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)

Are you planning to take on 70-662 exams fore your career sake? Download 70-432 dumps and E20-001 practice test to pass real exam with highest score.

Download OR Subscribe now to a VIP account

Responses to “Design a creative cosmetics layout with Photoshop”

1. 
   Gungurru Design Blog 25.08.2009 um 4:16 am

   That’s definitely an unconventional layout – but interesting, and could work very well!
   Thanks

2. 
   Nardyello 25.08.2009 um 12:25 pm

   Very creative. Taking a different approach to the standard model of a website. Very eye-catching.

   Great job

3. 
   صور بنات 25.08.2009 um 8:29 pm

   That is so nice, thank you, not only the idea, but the details of styling every element is important
   thanks

   صور بنات

4. 
   janghuan 25.08.2009 um 10:17 pm

   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

5. 
   Christina 26.08.2009 um 7:32 am

   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.

6. 
   admin 26.08.2009 um 7:32 am

   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

7. 
   admin 26.08.2009 um 11:41 am

   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

8. 
   Christina 26.08.2009 um 2:18 pm

   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

9. 
   Flex developer 27.08.2009 um 7:51 am

   Very good lesson and very light!! Thanks

10. 
    admin 28.08.2009 um 1:09 am

    I know. I will take care next time. Thank you Christina

11. 
    Murray 28.08.2009 um 8:52 pm

    Pretty interesting design.

    I’d wear orange lipstick

12. 
    joyoge designers' bookmark 4.09.2009 um 4:23 pm

    looks wonderful, you are perfect:) thanks for the tut..

13. 
    Silent Assassin 23.09.2009 um 3:17 am

    Thats a great Designing type, i find it impressive. Thanks for the tutorial

14. 
    Marko 3.03.2010 um 6:10 pm

    I think this layout is more for some flover shop or hat store. Anyway, It’s great!

Trackbacks

1. PhotoShop Tutorials for Web Design and Layouts
2. 网站设计教程汇总 | Booto'Blog

Leave a reply