?
Solved

Web Design Tutorial/Tips

Posted on 2006-11-27
9
Medium Priority
?
179 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 400 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 400 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 200 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
The Summer 2017 Scholarship Winners have been announced!
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…
Suggested Courses
Course of the Month10 days, 17 hours left to enroll

770 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