Creating Websites in Photoshop

[xxsmokeg187xx]

Hello Guys/Gals. My name is Gilbert and I am new to this forum. I was wondering, would anyone here be able to re-direct me to some kind of tutorial that will show me how to design an entire website using JUST photoshop. For instance, I create a canvas 640x480..add my text and graphics...and bam...website created. I know if I add a heading graphic...a nav bar going across below the graphic and content below....Photoshop makes the slices automatically VERY large. For instance, if I select just the navbar as a slice it sliced up everything for me like HUGE slices and that takes too long to load on the net. Any help would be great...thanks in advance! Gilbert

[Marcia]

Hi there, Gilbert and welcome to WebmasterWorld.

Sure you could do a whole site using just Photoshop, but I'm on a 56K dial-up connection, and I'm afraid it would take 9 years for the site to load. ;)

A lot of designers do their whole initial layout in Photoshop and then cut up the graphics, but if it stays all graphics with no HTML text there wouldn't be any food for search engine spiders to feed on. Take a look at the articles at Search Engine World [searchengineworld.com] to pick up some ideas on promotion. The promotion end of it is best done right through the design process from the start - makes it easier in the long run.

[tedster]

Photoshop is a great tool for creating templates. If you save the unflattened file, you have a single file record of the RGB numbers for your palette, the exact type settings for any graphic text, plus recent versions of PS allow you to include notes (even in audio!).

You end up with one .psd file that keeps a big part of the records you need for later site maintenance. It's extremely useful in standardizing a workflow when different people are involved in development over time.

[xxsmokeg187xx]

Does anyone know if this website was made entirely in Photoshop? It looks as if it was but it loads so fast....he has each slice saved as a JPEG but no bigger than like 20K. How? Anyone know?

<URL snipped>

(edited by: Marcia at 11:44 am (gmt) on Dec. 28, 2001)

[Marcia]

A full page graphic can be sliced up in as many sections as you want. I believe ImageReady that ships with PS does that, and there are some free utilities around that dice also.

No way to tell by looking how someone did it. Best thing is to find step by step tutorials for dicing photoshop graphics [google.com] and just follow along with whichever software you have.

[Brett_Tabke]

Paint shop pro also has an image slicer. Neat trick. I try to slice up the big ones into 468x60.

[Nu1]

I don't mean to plug Lynda Weinman but I learned PS and Image ready in no time with her book. <url snipped>

This is a book that takes you step by step on what to do. The more you practice the better you get. Hope that helps.

(edited by: tedster at 7:39 pm (utc) on Jan. 4, 2002)

[tedster]

One of the neatest things about slices is that you can make some of them JPG, and some of them GIF or PNG. Each part of your image can have the format that best suits it to speed up the page.

On almost every site I work with, I create a 10x10 GIF in each of the principle colors of the website's color palette. When an image is only one color, you can use the browser to redraw that image to any proportions you need and have consistent color accents for your pages (and their backgrounds).

This also means that you've kept a record of the exact RGB numbers for your site's palette -- just open up the gif in Photoshop and you can read the numbers easily.