Deviation Actions

detrans's avatar

Sleek - Web Layout Tutorial


This Photoshop Action will show you how to create a professional web layout in seconds.

Just click play and enjoy it !

Free PSD included!


1. Download and unzip this archive...

2. Click to open the "SleekDesign.psd" file FIRST !

Make sure in the Layers Panel the “Background” Layer is selected and all the Layers in the “materials” folder are not visible.

3. Once the .psd file is opened and active, double-click the downloaded “SleekDesign.atn” file to load it to your Photoshop Action Panel.

Go to "Window > Actions" menu in Photoshop to open the Actions Panel.

Click on the triangle next to the “SleekDesign” Action Set to expand it, then select the “SleekAction” action.
With the “SleekAction” selected click "Play" button, located at the bottom of the actions palette to run the selected action.


Only tested in PS CS4, but should work with any CS+.
If any problem, please report here...

I used Arial system font to avoid missing font problems, the original was made with Helvetica CY font family.


Original Web Layout: [link]
Photo: [link]
Icons: Licensed stock images - do not use them!


Adjustment Layer issue fixed.


As always: :+fav: is much appreciated : )

© 2010 - 2021 detrans
Join the community to add your comment. Already a deviant? Log In
DarKMaSk2009's avatar
This is great :), but how could I turn this in a joomla 3.x template? :(
12sparkz's avatar
great idea to make that looks like video (or something like that) but in PS6 it is so scatter, i wanna learn how to make that, do you have that tutorial too :)
abiralo's avatar
Let me check, hope work on CS6 also.
Wendik's avatar
i try to ps 3 cannot play ?[link]
SlushyIcee's avatar
can you use it for a website? xD
detrans's avatar
I made it for this tutorial,
but if you would like to...
SlushyIcee's avatar
and how do you do that? :)
detrans's avatar
by clicking the "play" button :)
Coolthunder49's avatar
valeka's avatar
So so beautiful!
LucazDiaz's avatar
I cant find de download link, and your job is fantastic.
detrans's avatar
"Download File" at the top-right corner
LucazDiaz's avatar
Thanks, gratz.
LucazDiaz's avatar
I'm begginer in photoshop, i only have 15 years and i use cs5, the “SleekDesign.atn” dont work here.
devzign's avatar
you have to open the actions panel (window-actions) then choose that SleekDesign action and press play, that's it : )
Lowongan Kerja - Web Designer [link] Apply Now!!
Lowongan Kerja - Web Designer [link] Apply Now!!
roramo's avatar
abdelghany's avatar
brilliant I like it :dummy:
evmarozova's avatar
very clean, nice job!
rome256's avatar
Great work............
detrans's avatar
kristianserbak's avatar
Hi friend, I have a problem with web page [link] the problem is a contact page. I cant keep the message that I send to other people on e-mail, there is an eror. I am creating my web page on a Web Creator Portable. Is that a problem with a XML or other? I am not programmer. Thanks!
Join the community to add your comment. Already a deviant? Log In