Solved

Web Design Tutorial/Tips

Posted on 2006-11-27
9
175 Views
Last Modified: 2010-04-07
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.
0
Comment
Question by:Eternal_Student
9 Comments
 
LVL 16

Accepted Solution

by:
BongSoo earned 100 total points
ID: 18019486
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 18019897
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
 
LVL 16

Expert Comment

by:BongSoo
ID: 18019957
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 18

Author Comment

by:Eternal_Student
ID: 18020383
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
 
LVL 16

Expert Comment

by:BongSoo
ID: 18020587
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
 
LVL 2

Assisted Solution

by:rollo1603
rollo1603 earned 100 total points
ID: 18040459
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 18044365
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
 
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 50 total points
ID: 18058791
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 18121541
Thanks guys. Ive found some very useful sites now.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to correct colors in Photoshop using the Color Balance adjustment Open a photo for editing in Photoshop: Open a photo for editing in Photoshop: Select "OK" on the dialogue: The Color Balance adjustment works b…
In this tutorial viewers will learn how to correct colors in Photoshop using the Levels adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Levels: Select "OK" on the …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question