Shop Mobile More Submit  Join Login
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]

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

Full-size: [link]

Enjoy, +fav and share.

...
Add a Comment:
 
:iconeil:
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.

Vision
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.

Originality
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. :)

Technique
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 ;)

Impact

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.

:iconlewisbell:
Vision

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.

Originality

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.

Technique

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.

Impact

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.

:iconmanphoto:
manphoto Featured By Owner Nov 26, 2014
Wow this is a nice tut.
Reply
:iconthesitax:
ThesiTax Featured By Owner Jul 19, 2014
Thanks For Your TUTO , It's amazing 
Reply
:iconthedevilreborn:
TheDevilReborn Featured By Owner Jul 23, 2013
This is amazing!
Can you do this with all Photoshops?
Is it alright if I +fav this?
 
 
Reply
:iconmr-wolf22:
Mr-Wolf22 Featured By Owner May 10, 2013
nice ...
Reply
:icongsm87:
GSM87 Featured By Owner Apr 26, 2013
Muito Bom!
Reply
:iconwox11:
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
Reply
:iconl1275:
l1275 Featured By Owner Mar 1, 2013  Hobbyist Photographer
GOOD!
Reply
:iconinyuji:
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?
Reply
:iconbayrozoma:
bayrozoma Featured By Owner Jan 19, 2013  Hobbyist Digital Artist
OMG <3
Reply
:iconsakuyahashimoto:
SakuyaHashimoto Featured By Owner Dec 23, 2012
nice :D
Reply
:icondesigner-jessica:
Designer-Jessica Featured By Owner Nov 19, 2012  Hobbyist Interface Designer
<3 !!!!
Reply
:iconstepsha:
Stepsha Featured By Owner Oct 8, 2012  Hobbyist Digital Artist
<3
Reply
:iconkyuubinokitsuune:
Kyuubinokitsuune Featured By Owner Sep 8, 2012  Student Traditional Artist
I don't see any words... I'm still going to give it a try though.
However, even if it doesn't work out for me, I love the design! Thanks.
Reply
:iconlostncrashd:
Lostncrashd Featured By Owner Aug 17, 2012  Student Digital Artist
that's one of the most useful tutorial i ever found. GZ! +fav.
Reply
:icon1llustri:
1llustri Featured By Owner Jul 18, 2012  Hobbyist Digital Artist
awesome job on the layout. dig it. :D
Reply
:iconangellofire:
angellofire Featured By Owner Jul 1, 2012
It's beautiful! May i ask what font you are using? :O
Reply
:icondetrans:
detrans Featured By Owner Jul 2, 2012  Professional Interface Designer
you can see at the "Character" panel on the screenshots,
what font I was using (Futura Condensed)...
Reply
:iconabhisheknigam84:
abhisheknigam84 Featured By Owner May 22, 2012  Student Interface Designer
thanks
Reply
:iconi-feelthebrush:
I-FeelTheBrush Featured By Owner Apr 21, 2012  Student Digital Artist
wow this is a nice tut.

are make tut on youtube `?
Reply
:iconinnocent-rebel:
innocent-rebel Featured By Owner Apr 4, 2012  Student General Artist
This is absolutely wonderful! Thank you so much!
Reply
:icondedohell:
dedohell Featured By Owner Apr 2, 2012  Student Interface Designer
this is awsome
Reply
:iconedesigngallery:
EDesignGallery Featured By Owner Mar 23, 2012  Student Interface Designer
i LOVE it!
Reply
:iconemdesignotr:
emdesignotr Featured By Owner Mar 10, 2012  Student Interface Designer
great tut
Reply
:iconfaithful-cat:
Faithful-Cat Featured By Owner Mar 8, 2012  Student General Artist
How did you create the gridlines? And how to you go to hue/saturation???
Reply
:icondetrans:
detrans Featured By Owner Mar 16, 2012  Professional Interface Designer
Reply
:iconmrcrispy14:
MRcrispy14 Featured By Owner Feb 4, 2012
Result: [link]
Awesome tutorial!
Reply
:iconxxxbreath:
xxxbreath Featured By Owner Dec 6, 2011
Thanks for this :) it helps a bunch when you are all sorts of lost on what to do!
Reply
:iconthisko:
thisko Featured By Owner Nov 17, 2011
this is so nice, thanks for sharing
Reply
:iconkailashjust08:
kailashjust08 Featured By Owner Aug 26, 2011  Hobbyist Photographer
super like tutorial :)
Reply
:iconhnlzwy520:
hnlzwy520 Featured By Owner Aug 24, 2011
I like it.
Reply
:iconblue-sapphire-ren:
Blue-Sapphire-Ren Featured By Owner Aug 3, 2011  Hobbyist General Artist
Great tut.. and found it easy to understand too.. Thank you..!!
Reply
:iconilovebeonglee:
IlovebeonGlee Featured By Owner Jul 17, 2011
Perfect, i will try *--*
Reply
:icondetrans:
detrans Featured By Owner Jul 17, 2011  Professional Interface Designer
Thanks, please do : )
Reply
:iconaftandel:
aftandel Featured By Owner Apr 29, 2011  Professional Interface Designer
Nice.
Reply
:icondetrans:
detrans Featured By Owner May 10, 2011  Professional Interface Designer
thanks.
Reply
:iconayoub94:
ayoub94 Featured By Owner Apr 12, 2011
awesome man .. great .
Reply
:iconicmilyc:
icmilyc Featured By Owner Apr 2, 2011   Filmographer
nice!
Reply
:icondetrans:
detrans Featured By Owner Apr 3, 2011  Professional Interface Designer
thx!
Reply
:icontaycanadian:
Taycanadian Featured By Owner Mar 19, 2011   Interface Designer
Loved it.

Would love it even more with some Text explanations.
Reply
:icondetrans:
detrans Featured By Owner Mar 20, 2011  Professional Interface Designer
thanks,
hope it was obvious enough
Reply
:iconzaibaknova:
ZaibakNOVA Featured By Owner Mar 11, 2011
yeah its very simple thanks for the tut :)
Reply
:iconmasoudin:
masoudin Featured By Owner Mar 4, 2011
hi
it's a nice Tutorial , thank you very much

Have a good Time !!!
Reply
:icondetrans:
detrans Featured By Owner Mar 4, 2011  Professional Interface Designer
ur welcome
u2!!!
Reply
:iconsweetchocoolat:
sweetchocoolat Featured By Owner Feb 28, 2011
WOOOW
amaziiing
Reply
:icondetrans:
detrans Featured By Owner Mar 1, 2011  Professional Interface Designer
THANKS
Reply
:iconsweetchocoolat:
sweetchocoolat Featured By Owner Mar 2, 2011
=3
Reply
:iconcinderellawasazombie:
this is amazing.
thanks!
Reply
:icondetrans:
detrans Featured By Owner Feb 25, 2011  Professional Interface Designer
am glad you liked it
Reply
:iconfya-no-hi:
Fya-no-Hi Featured By Owner Feb 15, 2011  Student Digital Artist
Are Text's layers and Gradient buttons's layers ( included their Style ) saved as .jpg to put in HTML file ?
Reply
Add a Comment:
 
×




Details

Submitted on
January 15, 2010
Image Size
4.4 MB
Resolution
1009×18000
Link
Thumb
Embed

Stats

Views
80,204 (12 today)
Favourites
1,381 (who?)
Comments
174
Downloads
4,031
×