Web Design Tutorial/Tips

Hi Guys,

Im after some GOOD web design tutorials for photoshop. Please only post DECENT links.

Im interested in curved containment areas and nice tabbed menus/nice menus in general. But web design in general please.

Thanks.
LVL 18
Eternal_StudentAsked:
Who is Participating?
 
BongSooConnect With a Mentor Commented:
You don't need photoshop for that (well, you can create the graphics, sure). You need to know CSS and HTML as that is what holds it all together.

Here are some links:

Dynamic Tabbed Menus
http://www.dynamicdrive.com/style/

Making Rounded Corners (without images or Photoshop):
http://www.html.it/articoli/nifty/index.html

A highly recommended book:
http://www.amazon.com/exec/obidos/ASIN/1590596145/dangergraphic-20?dev-t=05QWR3W56BNCT7W7JY82%26camp=2025%26link_code=xm2

CSS Zen Garden
http://www.csszengarden.com/

On the other hand, if you just want to know how to create graphics with photoshop, it would be better to ask a specific question.
0
 
Eternal_StudentAuthor Commented:
Thanks Bong, im pretty clued up when it comes to css and xhtml, I guess Id just like some decent tutorials on how advanced web layout techniques using photoshop. Like background containers and background gradients etc.

0
 
BongSooCommented:
Again, photoshop just creates images. Can you be more specific about what you mean by a background container? Gradients are pretty simple, but there are different ways of handling them depending upon what you want to do. Can you be more specific?
0
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

 
Eternal_StudentAuthor Commented:
ok take this website for example:

http://www.ntlworld.com/

It has a lot of curved elements and gradient effects going on.

Im wondering how to achieve these effects, especially the curve on the top search bar where it says "powered by google".

Are there any good tutorials for photoshop out there that cover these things?
0
 
BongSooCommented:
For the curve in a graphic like that, I would use the path tool. You need to be familiar with Bezier curves, just like in Illustrator or Freehand. Here is are a couple tutorials:
http://amanda.dd.com.au/cgi-bin/advice/view.cgi?1046
http://graphicssoft.about.com/od/vectordrawingbasics/

Basically, you draw your curve. Then, using the drop down menu on the Paths palette, you stroke it using the color and brush/pen tool of your choice.

The gradients are just a small image (1 pixel x the heigth). Using the gradient tool, you just choose your start and end colors (or any in between) and draw the gradient. Then they are applied as a background image, and repeated across the x axis (for a horizontal gradient such as the light purple one). If it were a vertical gradient, you would make it 1 pixel high, x width and repeat across the y axis.
0
 
rollo1603Connect With a Mentor Commented:
Kirupa.com has some great tutorials for effects that can really get your page looking professional. I think some of these can really make a site stand out. For the most part, they're pretty tasteful effects. I apologize if I'm missing the mark here, it seems like some tips beyond just the curves would be a big help too.

Cool Footer (can be for buttons too.)
http://www.kirupa.com/motiongraphics/coolfooters.htm

Trendy art (techno-grunge might be something else to call it.)
http://www.kirupa.com/motiongraphics/trendart.htm

Shiny Orbs (make cool buttons)
http://www.kirupa.com/motiongraphics/shinyorbs.htm

I really like this one. It's a nice 3-D effect)
http://www.kirupa.com/motiongraphics/3dlogos.htm

This is an interesting look. It's 3-D crystals.
http://www.kirupa.com/motiongraphics/crystallize.htm

Basically, giving buttons the same treatment as the Shiny Orb.
http://www.kirupa.com/motiongraphics/glass_button.htm 
0
 
Eternal_StudentAuthor Commented:
Thanks guys, some good stuff there.

Im thinking along the lines of this kind of thing (also):

http://www.k10k.net/index.aspx

I like the small graphics used, the headers and background imagry.
0
 
David BruggeConnect With a Mentor Commented:
A very powerful tool for the beginning web designer is your browser. Go to your favorite web page and right click on an image and save it. (Better yet, use FireFox as your browser and right click and choose "View Image" or "View Background Image"

Seeing what components (separate images) are used and how the web crater put them together is move than half the battle.

For instance, in your example: http://www.ntlworld.com/ the green bar that goes across the page and ends with "Powered By Google" is really a thin graded slice that is tiled across the page as the background of a div. Then the curved "Powered By Google" image is butted up against it.

No need to create the whole bar just the slice!

This is why the really good design tutorials are not PhotoShop tutorials. The web design should always come first, with PhotoShop just another tool in your toolbox.

David B.
0
 
Eternal_StudentAuthor Commented:
Thanks guys. Ive found some very useful sites now.
0
All Courses

From novice to tech pro — start learning today.