Amazing Website Designs - How do they do this?
 

Ok folks how does one do this? Meaning, how do you ever get things placed in the right spot, aligned, and the get the feel right on a web page design like this? Do you have to been an "artist" or use a fancy web design tool?

http://www3.telus.net/public/tmlohnes/IP0002BR.jpg

or even more intense?

http://www3.telus.net/public/tmlohnes/AX0039BL.jpg

I would like to really know how this is possible... :-|

Re: Amazing Website Designs - How do they do this?
 

Greetings.
Interesting! Are those sites developed using Flash? Or not at all? Could you check it?

Re: Amazing Website Designs - How do they do this?
 

Sites like those are designed in Photoshop, and then sliced up into tables and multiple images using Photoshop's slicing tools. After that, it's just a matter of fine-tuning the design with CSS - the general table layout is done by Photoshop.

Re: Amazing Website Designs - How do they do this?
 

Those are regular web sites. Probably from http://www.4templates.com or http://www.templatemonster.com. What they probably do is create the layout in something like Photoshop, then use Fireworks or ImageReady to slice it up, tweak it and clean it up, add some CSS, possibly create a Dreamweaver template out of it, and presto. That doesn't really impress me, as I do it all the time. What does impress me is the talent of the web designers. Those are some really nice designs.

Edit: Hehe, Dani's post wasn't there before I started writing this post. Oh well. :eek:

Re: Amazing Website Designs - How do they do this?
 

With photoshop eh? Hmm, well maybe I had better look into my Photoshop and Fireworks MX... I maybe missing something.

I just found them....extraordinary in the overall look and design. Didn't know how they did that.

Thanks

Re: Amazing Website Designs - How do they do this?
 

Yeah paladine, I've done it before, although my designs are much much much simpler :p

Actually if someone would show me one of their more 'detailed' designed that they have done this way I'd appreciate it alot :)

Oh, including code too

Re: Amazing Website Designs - How do they do this?
 

I am a coder an not an artist, but that is why I work with a graphic designer! :cheesy:

Anyways, CSS (Cascadign Style Sheets) are very powerful and that is what I use for formating and positioning. It is a lot easier than table layouts and you can do alot more. I have the graphic artist create an image in Photoshop, then I have at it. I slice the image up, create the DIVs, position them with CSS, and then you have a beautiful site.

In my opinion, the toughest part is creating a nice design and that is why I use an graphic artist.

I have attached one of the sites you had with some of the divs I would create. The neat thing about CSS is that the DIVs can overlap, like for the Nav bar.
http://www.rcswebdesign.com/css.jpg

Let me know if that helps,

Re: Amazing Website Designs - How do they do this?
 

Hey JasonRCS! Thanks for the tips, but I think what I am lacking for understanding is how to slice the page image up.

Actually there are several things I don't know it I understand.

1. How do you slice the page up? I have briefly seen this in DW MX and I see by your example how to approach it.
2. What is created from "slicing"?
3. How do you use CSS to position so accurately. I just have never grasped that very well.
4. You say use <div>, but how does this overlap? what is between the tags? i.e. image tags, or what?
:sad:

Thanks for an enlightenment!

Re: Amazing Website Designs - How do they do this?
 

I have to take off for a funeral right now. :sad:

I will give some examples and more explaintions soon....

Re: Amazing Website Designs - How do they do this?
 

With Photoshop you can do a "slicing" tool as mentioned above but its not the best way to arrange a website. Plus Photoshop is very expensive and harder to work with because it focuses on editing photographs rather than making graphics. You may want to look into other graphics programs that were made with websites more in mind like Paint Shop Pro.

I'll get to why Photoshop’s slicing is not the way to go in one sec

Sites like the one you showed rely on tables for structure. The best way for you to see examples of this would be to visit pages and view their source file. You can do that by going to View in the menu then Source. Copy their source and paste it into your html program (FrontPg, DreamWv.) Then you can see what the web designer did for that site.

The reason why Photoshop isn’t a good tool for slicing sites is that its not smart enough. I'll use your first template site for an example. There are patterns on that page such as gradients. (A gradient is one color slowly fading into another). If you sliced those areas up you would get big image files and the index page alone would probably be about 300k. Unlike the PS program, you can do smart things like make a smaller version of that gradient, then tile it behind the text in one of the cells of the table. Since the gradient is a seamless pattern, it looks like a huge image but is actually very small. Now your site is about 30k. There are lots of tips and tricks to doing this kind of stuff. I cant possibly list all here but if you have anymore questions, feel free to ask.


Brad Westfall
Designer
www.azpixels.com