HOME | DD
detrans — Photoshop Web Layout Tutorial
Published: 2010-01-16 05:21:34 +0000 UTC; Views: 91131; Favourites: 1384; Downloads: 4175
Redirect to original
Description
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.
...
Related content
Comments: 176
The whole reason I bought PS was because I wanted to learn web design. But I couldn't find any decent tutorials, so it's been sitting on my desktop gathering dust. Even though there's no text, this is still a very useful tutorial. Thank you for making it
👍: 0 ⏩: 1
very nice!
however i'd like to ask, what if i stretch the browser? what will the greeny background looks like since i guess you can't tile it since it's big and unproportioned color tones.
thanks!
👍: 0 ⏩: 1
HTML or Flash?
...well, doesn't matter you can make the background full browser scaled in both using AS, CSS or even JS. Since the background is blurry won't be pixelated.
Or create a green tiled bg and you can just erase the interface backrgound border.
👍: 0 ⏩: 0
Thnks alot,i was looking for how to make that noisy bg texture and this helped me alot!
This is what i made [link]
Hope you like it
i dno how you did those bee's you made that yourself or did you buy the stock?
👍: 0 ⏩: 2
thanks, I am glad it helped you.
yes, I think they were some stock photos...
👍: 0 ⏩: 0
oo i see how you did those bee's
👍: 0 ⏩: 0
This is great but how would I code it?
👍: 0 ⏩: 1
the tutorial is not about coding and why would you code a tutorial?
but, if you would make a similar design there would be 2 ways to code it:
- html, css and jquery
- flash (actionscript)
👍: 0 ⏩: 1
there are so many tutorials on how to make a layout on photoshop but none on how to turn it into a real, coded website layout.
thanks
👍: 0 ⏩: 0
strange this never came up on my feeds 
👍: 0 ⏩: 1
How do the selection, which is for 4 picture ?
👍: 0 ⏩: 1
those are grids, not selection...
👍: 0 ⏩: 1
Ok, im noob, with Photoshop.
How to make grids ?
👍: 0 ⏩: 1
sorry "guides" not "grids", anyway almost the same thing
it helps you positioning/aligning elements - you drag "guides" from the "rulers"
it was just for me to have my interface symmetric, but it is not so important in the tutorial
but, they are important things to know about:
[link]
👍: 0 ⏩: 1
Dumb question. XD Just found it. 
👍: 0 ⏩: 0
I like this kind of tutorial, especially from a person who just skim through and doesn't really read. Just looking at it makes me feel that I could just trigger photoshop and do it myself. Good one. Any new silence tutorial coming soon?
👍: 0 ⏩: 0
this is so useful. thank you for making this.
👍: 0 ⏩: 0
Outcome is cool but too simple
👍: 0 ⏩: 1
now THIS is awesome! thanx for the tutorial! i really appreciate it! why can't people do this more on here? thumbz up award!
👍: 0 ⏩: 1
you're welcome...
yep, they should : )
👍: 0 ⏩: 1
and that's why you're on my devWatch list fly guy. keep up the good work.
👍: 0 ⏩: 0
Wow! Wonderful technique to create that background - I might have to use this!
👍: 0 ⏩: 1
<= Prev | | Next =>