Amazing Website Designs - How do they do this?

[Paladine]

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?

[IMG]http://www3.telus.net/public/tmlohnes/IP0002BR.jpg[/IMG]

or even more intense?

[IMG]http://www3.telus.net/public/tmlohnes/AX0039BL.jpg[/IMG]

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

[red_evolve]

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

[Dani]

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.

[samaru]

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:

[Paladine]

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

[Slade]

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

[JasonRCS]

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.
[IMG]http://www.rcswebdesign.com/css.jpg[/IMG]

Let me know if that helps,

[Paladine]

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!

[JasonRCS]

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

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

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!

[bwest]

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

[JasonRCS]

I'm back, for now.

Slicing: I personal have used two programs to do the slicing, ImageReady and Fireworks. ImageReady comes with Photoshop and Fireworks is a Macromedia product.

What is slicing?
Slicing is taking a large image and cuting it up into smaller images, plain and simple. I have a graphic artist draw a website in a photoshop document and then they pass it along to me. I take that and then "slice" it up into smaller pieces. You can then export the whole thing (code and all) and you have a website. I do not recomend doing that though (not a fan of table layouts, I prefer CSS). I take just select slices and manipulate them with CSS. Lets take the gradients in the first document. Instead of creating a slice of the whole square, I just take a slice 10px wide and then repeat it in the background with this:

background: url(bg.jpg) repeat-x;

Now the whole css thing is another story.

CSS uses the <div> tag to hold elements and you assign them class or id attribute to connect them to your css. (this is just one way, there are atleast 3 way to use css: inline, in the head of the document, or in an external file) There is more that I can explain here. I have been at it for a year now, and I am just starting it use it efficeintly. Check out: http://www.sitepoint.com they have some great articles on CSS. You can also check out some of my sites: http://www.rcswebdesign.com or http://www.konetainc.com/index.asp (this one is still under development) and check out the sources. You will see the div tags with class and id attributes. You can then check out the css file, if you can not find it on your own, send me an email and I will send you a link.

I hope this helps. Let me know if you have any more questions. I did a lot of research on the internet to help me learn. I would be happy to pass along some links if anyone is interested.

[banners2go]

Yep, basically.....most designs on the internet are created in programs like photoshop. The designs are then sliced into images (many smaller images) and then put together using html/css.

Gone are the days off just html tables for design.....

It seems like you got alot of help from the replies above though! If you need any help with anything im preety experianced with photoshop and design so dont hesitate to drop an email to me.

[Paladine]

Hey thanks folks. That clears up so much. But I still have a question. I have played with CSS and I am still big lover of using tables to format the layout. I know it is not highly appreciated, but it is easier. But I am a firm believer that easier is not necessarily better. So I want to use CSS. And maybe CSS is easier, but I find it to be an extreme pain to use for positioning, and layout. Coloring and styling CSS works great.

Thanks again.

[Slade]

Well paladine, I can tell you right now css is not easier :) (in my opinion) but, it is much more compatible across browsers and platforms. My website is designed in css and has been tested in mozilla, ie, opera and netscape and it looks identical across all those browsers, so I'm happy :). It is a pain for positioning and layout but you just have to tweak it... alot until you get it. That and look up tutorials etc. I use padding and margins alot, but it depends on what you want it all for.

Sorry I couldn't be more help,

Slade

[Arizona Web]

Well paladine, I can tell you right now css is not easier :) (in my opinion) but, it is much more compatible across browsers and platforms.

Slade, for more graphical designs this is usually not the case. I am a fan of table-less design, the code is so flexible and clean and easily managed with an external CSS file, but I dare you to get a hip top, or download an old netscape browser and find a highly graphical site that displays properly, or even close to it.

That doesn't mean you have to use tables, that just means don't do away with them just yet if you are going for a highly graphical design.

As for everybody saying Photoshop is the way to make layouts like that, I disagree a little to a point. Photoshop is the best raster image-editing program in the world, but it is not the only one. Personally I use fireworks because it slices images into perfect code much better than adobe products once you learn how to slice properly. I was a Photoshop guy for a long time until I got more web based. Now my tool of choice is a more comprehensive solution for creating compatible web sites. Took some getting used to, but I am glad I did it.

People who draw graphics instead of altering images and placing simple shapes usually use programs like illustrator, in design, and freehand (freehand sucks, one of the only MM products you will hear me say that about).

To slice images properly requires knowledge of HTML. One has to understand where lines should begin for one part of an image and end for another, and be able to visualize those elements in tables and or divs. Imagine trying to code a table or series of divs to hold your image into a site. If the code would be huge and unmanageable, rethink where you would draw that line. The one thing that I can say I have gotten really really good at in my years of using graphics programs and creating websites is learning where to draw those lines. Unfortunately, it is difficult for me to articulate. You have to be able to see the code behind when you create those slices, otherwise you are looking at a nightmare to manage when all is said and done.

Sites that look amazing like that first one the poster pointed out are often created by people with print and corporate design experience who are working with web geeks like ourselves. Sometimes it is hard for a coder to see beautiful imagery and create it, and sometimes it is hard for a designer to see clean compatible code and create it from their beautiful imagery. It just takes balance.

[Slade]

I meant in general

[DaveSW]

As a general rule the aim is to get your information displayed in version 4 browsers, rather than actually rendered as it would be to a modern browser. With that aim in mind the @import hack is extremely useful: http://w3development.de/css/hide_css_from_browsers/import/

[DaveSW]

http://www.csszengarden.com/ - check out some of the different styles you can apply to one html page to completely change it. Some of these are nearly as good as the first ones posted I think, tho you have to look around to find the best ones.

[carlino]

I'm not that good with CSS so I tried these examples by using tables. It came out rather good looking.
I made a frame for my page and cut out the four corners, and then a slice from all four sides(which I then repeat to fill out the space between the corners).

How is this achieved by using CSS?

Maybe this should be in a separate thread, but anyway, it's not that off-topic at least. :confused:

[DaveSW]

You'd either use a large background image and use absolute positioning to just drop the stuff over the right part of the image, or you'd break the image up into smaller pieces and use them as backgrounds, repeating and tiling where necessary, and floating the stuff into position. The second option would have the best download time, the first would take about 20mins to make.

[DaveSW]

Paladine, if you could give me links to one of those designs maybe I could have a go at making it in CSS. I will be busy in the next couple of weeks but I should be able to find the time somewhere.

Since I won't actually be using it hopefully I won't be breaching their copyright... Just proving a point... :lol:

[Paladine]

Thanks DaveSW here is the primary site, and I just found those I posted initially just through browsing their items.

Thanks in advance.

P.S. I tried to do something simple in Adobe with slices and it didn't work the way I thought it would. I have a training CD which I am going to try to go through.

:cool:

[Arizona Web]

P.S. I tried to do something simple in Adobe with slices and it didn't work the way I thought it would. I have a training CD which I am going to try to go through.

:cool:

Hey, Adobe is great for making graphics, but be careful using the HTML their products produce from slicing. It tends to write bloated code at times and it is somtimes not as cross browser compatible as it should be.

[Slade]

Hey, Adobe is great for making graphics, but be careful using the HTML their products produce from slicing. It tends to write bloated code at times and it is somtimes not as cross browser compatible as it should be.

I know what you mean about the bloated code... it's ridiculous. Anyway, I don't use adobe to generate html, I just slice the images up and save them as seperate files, then use them in my code :D.

[DaveSW]

Thanks DaveSW here is the primary site, and I just found those I posted initially just through browsing their items.

Thanks in advance.

P.S. I tried to do something simple in Adobe with slices and it didn't work the way I thought it would. I have a training CD which I am going to try to go through.

:cool:

Have I missed a link in there? :!:

[buddyb]

Well, it would appear to me, maybe, a vector drawing program, Photoshop and Dreamweaver. What you show hear appears to be a template from one of those package thingies. I know a lot of those are done in Photoshop period. With layers you can arrange to suit yourself, then save as HTML. Jes thots off the top o me head.
BuddyB

[rixius]

Those two, specifically, are purchased templates from www.templatemonster.com

[jamesk400]

No one has mention Microsoft Publisher and Microsoft Excel. You can do some nice things with those programs too. I know for sure that in Excel you can create you site by inserting your pictures and such then just save it as a website under the File menu.

[Paladine]

Have I missed a link in there? :!:

Hey sorry dude, I must have been drunk or something.

Here is the link this time:

http://www.4templates.com/

:eek:

[JasonRCS]

No one has mention Microsoft Publisher and Microsoft Excel. You can do some nice things with those programs too. I know for sure that in Excel you can create you site by inserting your pictures and such then just save it as a website under the File menu.

My problem with "auto generated" code is the bloat. Even when I use Photoshop, I do not auto generate the code. I slice them manually and then create the code myself.

When you are dealing with MS products that were not designed to create websites as their main function, like the office products, you get a TON of bloat. Bloat slows down your site and search engines choke on it.