How Do You Start Your New Designs?

[GraphicMD]

When I start to design my websites I usually just start in html and css, then when I have the layout and color scheme down I just fill it in with images that fit the design that is already there.

Lately I have been opening up an image editor and creating an image of what the website will look like, then crop it apart into smaller pictures and design my html and css to match my original image.

I was just wondering how everyone else gets started.

[PostBot]

I always use second method - first create one big image, then create code for that image.

[GraphicMD]

I love my image editor (PhotoImpact), but it doesn't do curves or diagonal lines very well. I guess that is called vector graphics when it is not just a bunch of dots. It takes forever to make a nice style that is not really boxy. I have to zoom way in and place one dot at a time, and even then it doesn’t look really clean.

I tried Photoshop (the light version, not sure what the name is. Something like CE), but I didn't like the way it handled layers. If I pasted an image onto another image that was larger than the original it would just cut off the rest of the paste instead of existing outside the borders of the original image. When I tried to drag that layer outside of the original image to make it isn't own image it didn't work. I got frustrated and said I would never use adobe. Now I am stuck with pixely curves.

This is why I don't like to make my images first. Although I have for my Whatisreal and Clouds design on my website. I am not really happy with the way clouds turned out. It looked much better before it was a webpage. It was a huge rush job. I just wanted to get more styles out.

[PostBot]

In Photoshop there is function "show all" that will expand image as needed so everything would be visible.

If you want vector graphics then use Fireworks. Its simple and its enough to create good styles (my old styles before Morpheus were all created with Fireworks, Kail creates his styles with Fireworks). Photoshop is in my opinion much more powerful, but it uses completely different logic that you will need to learn and that's more complex than learning Fireworks.

[GraphicMD]

I don't really need more powerfull, just easy to learn and use. I think what I have is good with that one exception. I might try Fireworks. I wonder if my college has an acedemic version. I bet it is pricy.

[Krisiun]

CyberAlien,

I have an image, who contain the layout of a website. How to convert the image in .psd to .html, using Photoshop 7??

Thanks.

[PostBot]

You can use slicing tool, but it generates awful code. I recommend to code it manually. Use slicing tool to create images, but don't use it for code.

[GraphicMD]

I try to look at my image and see how I should lay out my tabels or divs before doing anything. When I get an idea of how I can write my html and css to mimic my image, I then start taking little parts of my big image and saving them as seperate files.

[Krisiun]

[quote user="CyberAlien"]You can use slicing tool, but it generates awful code. I recommend to code it manually. Use slicing tool to create images, but don't use it for code.[/quote]
Hmm, ok. Then, I will to try code it manually.

But it's very complex...

Well, thank you.

[GraphicMD]

Krisiun, it isn't too bad once you get familiar with html and css (which are both easy to get use to). If you have an image I will look at it and tell you how I would do it if you would like.

[Krisiun]

[quote user="GraphicMD" post="8527"]Krisiun, it isn't too bad once you get familiar with html and css (which are both easy to get use to). If you have an image I will look at it and tell you how I would do it if you would like.[/quote]

I am familiar with html and css, but the layout of this image is more or less hard for me and too i not have time to code it. This layout was finished in long time ago, but the code was losted.

Was a layout of a webhosting page. Look (in .psd format):

http://www.playhost.com.br/images/host.psd

http://www.playhost.com.br/images/hostestrutura.psd

http://www.playhost.com.br/images/hostplanos.psd

http://www.playhost.com.br/images/hostsuporte.psd


Sorry for the large size of the files.

[GraphicMD]

sorry, I don't have Photoshop. to open the images.

[Krisiun]

Ok, sorry. I will convert the images to .jpg format later.

[GraphicMD]

okay, just let me know.

[g0liatH]

I usually make a big image in photoshop and slice it. sometimes I just start from scratch and add images later though. However, Cyberalien, I was wondering how you make so many color thems of one style, the css sheet and the images are the most work, so how do you do it??