Making Your Own Layouts using Photoshop

paintballdude13's picture

They have: 42 posts

Joined: Feb 2003

I've read some tutorials on the net about making your own website layouts using photoshop. There ok till it gets to the coding part. For example on this tutorial Here I want to try and make a layout like that soon for my own personal website plus maybe making some for other people. I'm trying to make my own cool layouts or whatever you want to call them because I want to start making websites for other people and it needs to be professional looking. I already made one website for someone, but I used a template I found online and just modified it. If someone has a link to a better tutorial that'd be great. Also like in taht tutorial would I have to reslice it every time I updated the main page, or is that box just a example of where I'd put my text? Then how exactly would I code in what I'd want to say. Thanks if this makes any sense to you

He has: 296 posts

Joined: May 2002

In that example you'd have to update the content image every time. What you could do is still use an IFRAME (not recommened), set the BG to the content image (w/out text) and have it stay fixed. Then just put text over it.

[James Logsdon]

paintballdude13's picture

They have: 42 posts

Joined: Feb 2003

Hmm well maybe screw that idea. I just want to make some cool yet professional style layouts/designs. Can anyone give me some links that might help me on how to make some.

Busy's picture

He has: 6,151 posts

Joined: May 2001

You'll find most layouts tie in with a theme which relates to the content. Like you wouldn't have pinks and baby blues with daisys for a heavy metal band, or you wouldn't have a black background with flames or skulls for a ballet site.
A netrual layout would be dull without a theme, white and blue are very common (probably to common).
Just remember the KISS rule because sometimes (not always) less is more

paintballdude13's picture

They have: 42 posts

Joined: Feb 2003

Ya I'm trying to make it semi simple. I cant make a semi decent looking shapes and stuff like that, they make it seem to easy Here but I cant get the damned Pen tool to do anything that I want, I dont know how in the world to use it right.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Perhaps you should be looking for basic tutorials in using the application first.

paintballdude13's picture

They have: 42 posts

Joined: Feb 2003

Quote: Originally posted by Suzanne
Perhaps you should be looking for basic tutorials in using the application first.

I know how to use Photoshop pretty good, but I've never had the need to use the Pen Tool before and today was the first time I even tried using it. I just cant get a semi decent looking shape.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

IME you really need to start off by looking around the net and finding a collection of sites that you really like and then try and copy them by using a combination of your graphic editor and html editor (not for actual use but to get practice). Professional looking sites don't have to be graphics intensive - colour, layout and logo are the main aspects to get right, then you can start trying to make more elaborate designs.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

The pen tool is one of the most important tools in Photoshop. Learning how to use the application thoroughly will allow you to create anything you want.

Learning about layout design will be very helpful as well.

If you want to have things professional "looking" the best approach is to be professional about it. Learn how to use the tools and learn the design theories behind effective layout.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I actually don't use the pen tool very much at all in Photoshop. It is the most important tool in Illustrator, but I've never liked the way it works in Photoshop or found it to be a necessary tool to use - I guess I'm not such a good graphics person after all, eh?

I found learning the pen tool (in Illustrator) to be quite challenging at first. It's often a difficult concept to grasp if you've been working with raster graphics alone for a long time. But then I guess that's another testament to my lack of graphics skill!

I think that you should really start on a simpler level here. That layout you pointed out does seem to be rather complex. Start by drawing a simple layout and try to get it into HTML. Always be thinking about how you're going to code the site. As you become more skilled you can concentrate on visuals more.

I remember learning a lot about photoshop from the tutorials here: http://www.eyeball-design.com/fxzone/frames01.htm They'll seem difficult at first but it can help you to learn to make different shapes and effects using the channels palette. Scroll down to the "old" photoshop tutorials for some basic elements. You can learn a lot of techniques here that don't necessarily have to be applied to fancy 3D style interfaces like these. It also demonstrates how to create curved shapes without using the pen tool - that's how I always do it.

paintballdude13's picture

They have: 42 posts

Joined: Feb 2003

Can anyone recomend a good tutorial on how to use the Pen Tool?

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

I don't use Photoshop but a search on google returned these results which may be useful.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Quote: Originally posted by Megan
I actually don't use the pen tool very much at all in Photoshop. It is the most important tool in Illustrator, but I've never liked the way it works in Photoshop or found it to be a necessary tool to use - I guess I'm not such a good graphics person after all, eh?

Ha! Goes to show you that what's important to one person isn't to another. Wink

I was talking about basic skills to use the software, though, not talent or ability.

disclaimer: I'm vector-oriented, not so much raster oriented. So my perspective on the matter is and probably should be radically different from Megan's, but she has been knowledge of vector imaging as well, whereas I'm a raster-idiot. Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.