Solved

Web Design Tutorial/Tips

Posted on 2006-11-27
9
177 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

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.
This video demonstrates how to use each tool, their shortcuts, where and when to use them, and how to use the keyboard to improve workflow.
In this tutorial viewers will learn how to create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …

738 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