Shop Mobile More Submit  Join Login


Submitted on
January 15, 2010
Image Size
4.4 MB


79,365 (4 today)
1,374 (who?)
Photoshop Web Layout Tutorial by detrans Photoshop Web Layout Tutorial by detrans
Professional Photoshop Web Layout Tutorial.

I call it: "silence tutorial" because of no time adding a description. Sorry about that...

But, observing the Photoshop tools and layers (effects), it is quiet obvious how it was done.

Result: [link]

Background: [link]
Flower: [link]
Bee: [link]

Full-size: [link]

Enjoy, +fav and share.

Add a Comment:
Hi there, thanks for taking the time to do this - it's not often I stumble over a layout tut, so I just thought I'd give some feedback and suggestions. My ratings vary a bit so I'll cover each separately.

Your end result is crisp and clean and eye-catching, and you managed this with simple yet effective techniques. In other words, it's a great subject for a tutorial.

I don't often see weblayout tutorials. Weblayout tutorials with a professional-looking outcome is even rarer, hence the high score. I really hope you write more tutorials concerning webdesign be it walkthrough, guide or tut; you have some awesome work in your gallery and it would be so great to get a peek over your shoulder that way. :)

The score here is in no way related to your end-result, but - ironically - the layout of the tut. Even though you manage to illustrate the steps very well with your screenshots and a person familiar with PS's interface shouldn't have much problem following this, it would be so much better with a few sentences accompanying each step. "Go to Filter>Blur> Gaussian Blur and use these settings" - that sort of thing. Also, I think you could have rearranged/cropped your screenshots down to the important parts instead of posting the whole thing in every step. That way the reader wouldn't get distracted by unecessary elements. Taking your skills into consideration, a good tutorial layout should be a piece of cake for you ;)


I'm glad you wrote this and I enjoyed briefing through and seeing the outcome. Again, there's a definite lack of good weblayout tus on dA and I'd really, really like to see one at #photoshop-tutorials - I think it would be popular and benefit alot of people. The only reason it wasn't accepted was because of the aforementioned layout/text thing. If you could make the effort to add text to your tutorial/walkthrough, we'd be more than happy to consider it again. Please. :p

:noir: Eil
What do you think?
The Artist thought this was FAIR
148 out of 156 deviants thought this was fair.


The finished product is indeed clean, simple and professional; as you aimed for it to be. It's a fantastic piece for someone to mimic, especially someone starting out, because of it's relative simplicity (in both looks and technique) whilst maintaining the intended purpose of looking good.


I don't see many web design tutorials, which is a real shame so you've got plenty of stars for that part. Whilst the design may have similar aspects to other works, it's the tutorial that you're being judged on here.


Unfortunately, you lack explanations! It would reinforce the simplicity of the tutorial if there were basic explanatory sentences thrown in there too. Luckily, the images show enough for anyone with Photoshop experience to be able to follow along.


The design is lovely and the tutorial is top-notch too. You get a four here simply because it's hugely useful for anyone looking to learn.
What do you think?
The Artist thought this was FAIR
85 out of 92 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

manphoto Featured By Owner Nov 26, 2014  New member
Wow this is a nice tut.
ThesiTax Featured By Owner Jul 19, 2014
Thanks For Your TUTO , It's amazing 
TheDevilReborn Featured By Owner Jul 23, 2013
This is amazing!
Can you do this with all Photoshops?
Is it alright if I +fav this?
Mr-Wolf22 Featured By Owner May 10, 2013
nice ...
GSM87 Featured By Owner Apr 26, 2013
Muito Bom!
Wox11 Featured By Owner Mar 26, 2013
man thanks a lot! amazing tutorial!!!! the first tutorial that you can follow from beginning to end without missing key points!! :D
l1275 Featured By Owner Mar 1, 2013  Hobbyist Photographer
InYuJi Featured By Owner Feb 2, 2013  Professional General Artist
why did you add the "noise" pattern to the background? Does it help with smoother color gradient when displayed on the web?
bayrozoma Featured By Owner Jan 19, 2013  Hobbyist Digital Artist
OMG <3
SakuyaHashimoto Featured By Owner Dec 23, 2012
nice :D
Add a Comment: