detrans's avatar

Sleek - Web Layout Tutorial

511 94 62K (1 Today)
By detrans   |   
Published:
© 2010 - 2020 detrans
Description:

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

Just click play and enjoy it !

Free PSD included!


Instructions:

1. Download and unzip this archive...

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

DO NOT TOUCH OR CHANGE ANYTHING THERE !
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.


Support:

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.


Credits:

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


Update:

Adjustment Layer issue fixed.

...

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

...
Comments94
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
DarKMaSk2009's avatar
DarKMaSk2009Hobbyist Photographer
This is great :), but how could I turn this in a joomla 3.x template? :(
12sparkz's avatar
12sparkzHobbyist Interface Designer
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
detransProfessional Interface Designer
I made it for this tutorial,
but if you would like to...
SlushyIcee's avatar
and how do you do that? :)
detrans's avatar
detransProfessional Interface Designer
by clicking the "play" button :)
valeka's avatar
valekaHobbyist Traditional Artist
So so beautiful!
LucazDiaz's avatar
LucazDiazStudent
I cant find de download link, and your job is fantastic.
detrans's avatar
detransProfessional Interface Designer
"Download File" at the top-right corner
LucazDiaz's avatar
LucazDiazStudent
Thanks, gratz.
LucazDiaz's avatar
LucazDiazStudent
I'm begginer in photoshop, i only have 15 years and i use cs5, the “SleekDesign.atn” dont work here.
devzign's avatar
devzignProfessional Digital Artist
you have to open the actions panel (window-actions) then choose that SleekDesign action and press play, that's it : )
ehermawan's avatar
Lowongan Kerja - Web Designer [link] Apply Now!!
ehermawan's avatar
Lowongan Kerja - Web Designer [link] Apply Now!!
roramo's avatar
roramoStudent Interface Designer
awesome...
abdelghany's avatar
abdelghanyProfessional Interface Designer
brilliant I like it :dummy:
detrans's avatar
detransProfessional Interface Designer
thx :chew:
evmarozova's avatar
evmarozova Interface Designer
very clean, nice job!
rome256's avatar
Great work............
detrans's avatar
detransProfessional Interface Designer
thanks..............
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!
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In