Solved

Web Design Tutorial/Tips

Posted on 2006-11-27
9
172 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
Read about why website design really matters in today's demanding market.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to create a vector texture to apply a non-rasterized texture to vector images, using Photoshop and Illustrator Open a textured image such as a scanned-in piece of cardboard in Photoshop: Convert the texture to…

707 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now