Slices to web template?

F
Posted By
Friend
Jun 26, 2006
Views
215
Replies
4
Status
Closed
Please help me understand the process!!!

I downloaded a template I like, but I’m stalled at using it. No help files and just my meager understanding of PS and HTML.

I know how to edit the PSD to suit my needs, and I know how to "save to web" and export the slices to the images sub-folder. (kinda)

I’m trying to back up in time and understand what the entire PSD to HTML page process involves.

Where I get fuzzy (actually, totally lost) is if I create a new PSD for a web page from scratch, and export the sliced image files, how do I create the template that arranges them into the right postions?

DO I need to build a html template before building the PSD image? or
Is there a tool or process I’m missing that will creat the html layout from the PSD slices?

Thanks!
Kay

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

FN
Flo Nelson
Jun 26, 2006
If you’re using a template and have limited html understanding, the best thing to do is to make a separate copy of the template, edit the photoshop file to your liking and then save the slices with exactly the same name that they have in the original template. Overwrite the original images and then everything should fit.

If this site is for your business, I’d recommend consulting with a web design/developer and get them to check things over – there are so many things you need to know to make a web page work well in all the different browsers and systems. And some of the templates out there look nice but have very poor html that breaks down easily with almost any edit.

Flo

"KaySaRahh" wrote in message
Please help me understand the process!!!

I downloaded a template I like, but I’m stalled at using it. No help files and
just my meager understanding of PS and HTML.

I know how to edit the PSD to suit my needs, and I know how to "save to web" and
export the slices to the images sub-folder. (kinda)

I’m trying to back up in time and understand what the entire PSD to HTML page
process involves.

Where I get fuzzy (actually, totally lost) is if I create a new PSD for a web
page from scratch, and export the sliced image files, how do I create the template that arranges them into the right postions?

DO I need to build a html template before building the PSD image? or
Is there a tool or process I’m missing that will creat the html layout from the
PSD slices?

Thanks!
Kay
F
Friend
Jun 26, 2006
Thanks! I’ve done that and it works fine, but I’m trying to get a handle on how it’s done in the design phase.

I can create table and place images in them OK, and even modify the template for more images.

What I’m trying to learn is what comes first, the chicken or the egg. 🙂

Do you build a PSD and use a tool to create the HTML template that aligns the slices/images?

On Mon, 26 Jun 2006 15:37:46 GMT, "Flo Nelson" wrote:

If you’re using a template and have limited html understanding, the best thing to do is to make a separate copy of the template, edit the photoshop file to your liking and then save the slices with exactly the same name that they have in the original template. Overwrite the original images and then everything should fit.

If this site is for your business, I’d recommend consulting with a web design/developer and get them to check things over – there are so many things you need to know to make a web page work well in all the different browsers and systems. And some of the templates out there look nice but have very poor html that breaks down easily with almost any edit.
Flo

"KaySaRahh" wrote in message
Please help me understand the process!!!

I downloaded a template I like, but I’m stalled at using it. No help files and
just my meager understanding of PS and HTML.

I know how to edit the PSD to suit my needs, and I know how to "save to web" and
export the slices to the images sub-folder. (kinda)

I’m trying to back up in time and understand what the entire PSD to HTML page
process involves.

Where I get fuzzy (actually, totally lost) is if I create a new PSD for a web
page from scratch, and export the sliced image files, how do I create the template that arranges them into the right postions?

DO I need to build a html template before building the PSD image? or
Is there a tool or process I’m missing that will creat the html layout from the
PSD slices?

Thanks!
Kay
T
Tacit
Jun 26, 2006
In article ,
KaySaRahh wrote:

Where I get fuzzy (actually, totally lost) is if I create a new PSD for a web page from scratch, and export the sliced image files, how do I create the template that arranges them into the right postions?

You export the sliced file from ImageReady, which came with Photoshop. There is a button on the bottom of the toolbar which sends the image to ImageReady.

ImageReady automatically makes the .html file that puts the slices all back together again.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com
FN
Flo Nelson
Jun 27, 2006
"KaySaRahh" wrote in message
Thanks! I’ve done that and it works fine, but I’m trying to get a handle on how
it’s done in the design phase.

I can create table and place images in them OK, and even modify the template for
more images.

What I’m trying to learn is what comes first, the chicken or the egg. 🙂
Do you build a PSD and use a tool to create the HTML template that aligns the
slices/images?

My usual process for creating a site is to design it first in Photoshop. Then I think about the best way to create html code that will give me the most flexibility — easiest to change, add images, text, etc. and that will look about the same in different browsers and systems. Then slice the image according to that vision. Then create the page design in html and css.

If you’re making a business site, it’s really crucial to learn html, css, and the basics of how to put a site together. ImageReady does not create very good code – it’s also usually hard to maintain. For a personal site where perfection is not crucial, you can let ImageReady create the html for you and just understand its limitations.

Dreamweaver is the tool most web designers use, though there are others that are okay. Even with Dreamweaver, though, the crucial thing is to understand how to build pages – some of the "easy" choices in Dreamweaver are not even very good ways to create a web page.

Flo

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections