Congratulations to AcaCandy on her 100,000th post!
There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
acer black screen boot bsod computer connection crash css dell driver drivers email error ethernet excel explorer firefox firefox 3 hard drive internet internet explorer itunes laptop linux malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express partition problem router security slow software sound spyware trojan usb video virus vista wifi windows windows xp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Slicing a photoshop layout and inputing it to xHTML/CSS


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

Closed Thread
 
Thread Tools
Fetch_Man's Avatar
Member with 87 posts.
 
Join Date: Jul 2004
Location: CA
Experience: Intermediate
20-Aug-2007, 01:34 AM #1
Slicing a photoshop layout and inputing it to xHTML/CSS
I made my layout in photoshop but I can't seem to find a way to convert it i
nto HTML/CSS. Can anyone show how to do this? And preferably without using t
ables.

Here's the photoshop image:

[IMG]http://img292.imageshack.us/
img292/5953/layoutbl4.th.jpg[/IMG]
Duckman69's Avatar
Computer Specs
Senior Member with 642 posts.
 
Join Date: Jun 2007
20-Aug-2007, 01:51 AM #2
normally i dont do what your saying with photo shop... i usually either make 1 image or piece for either a banner or background / etc then save that image and upload it to that area of the page...

I know you probably dont want to do this but you have the option of just uploading that image as your background and then then positioning the links exactly where they need to be, and work with the rest from there...

I also belive that if you choose to take the roote you seem to want to you need a java script for that, im not 100% but i downloaded a BUNCH of templates looking at code and looking for pictures i could use, if you goto http://www.freewebtemplates.com/ they have 1000's of free templates download like 2 of them and see the stuff they have in there packs i think your looking for a javascript file like i said... hope i helped some...
~later
Atcony's Avatar
Computer Specs
Member with 33 posts.
 
Join Date: Aug 2007
Experience: You Decide!
20-Aug-2007, 01:54 AM #3
CSS Design Mockup - Here you will find a quick step by step instructions on how to get it done.

ATB

Last edited by Atcony : 20-Aug-2007 01:59 AM.
Duckman69's Avatar
Computer Specs
Senior Member with 642 posts.
 
Join Date: Jun 2007
20-Aug-2007, 02:20 AM #4
nice thanks atcony learn something new everyday ^^
Fetch_Man's Avatar
Member with 87 posts.
 
Join Date: Jul 2004
Location: CA
Experience: Intermediate
20-Aug-2007, 02:27 AM #5
Thanks for making that page on your website just for me.

I don't understand what you mean in step #5 though, "5. Now you need to specify in image ready the ouput parameters." I couldn't find that in ImageReady. (Using version CS)

And on the Outputsettings menu, there is no CSS export, there's only: HTML, Saving HTML, Slices, Image Maps, Background, Saving Files, and Metadata.
Atcony's Avatar
Computer Specs
Member with 33 posts.
 
Join Date: Aug 2007
Experience: You Decide!
21-Aug-2007, 12:37 AM #6
Yeah, Just for you. You are special

Anyway, I have the same version (CS 8.0) You will get these settings by keyboard shortcut [ctrl+alt+shift+H] too.

There you will find output settings.

Select [slices] and you will be able to generate CSS. I hope this is helpful, and you get it right. Let me know.

If you do it once, you will be able to create mockups within a minute. It's just easy!

That was just a quick version. Will elaborate it later on, with details.

Thanks.
__________________
Creative Designs - Blog Tweaks by webgk.com
Fetch_Man's Avatar
Member with 87 posts.
 
Join Date: Jul 2004
Location: CA
Experience: Intermediate
21-Aug-2007, 02:01 AM #7
Quote:
Will elaborate it later on, with details.
how much later on is the question.
Atcony's Avatar
Computer Specs
Member with 33 posts.
 
Join Date: Aug 2007
Experience: You Decide!
21-Aug-2007, 02:47 AM #8
Well, that's a great question.

How about answering later on.

Anyway you might have got the page sliced by now.
cperkins's Avatar
Junior Member with 1 posts.
 
Join Date: Aug 2007
22-Aug-2007, 01:22 AM #9
I wrote a Photoshop plug-in that helps convert Photoshop designs to working web sites. Rather than slicing the page up, you name the layers certain way and it'll figure out the rest (we call it putting "hints" on the layer names, like contact us-button and contact us-rollover).

If you are having trouble figuring slicing out, you should check out SiteGrinder: http://www.medialab.com/sitegrinder

And, even if you understand slicing, SG can be handy. It outputs CSS based sites ,no tables, no slicing. It can convert styled text in Photoshop directly to styled HTML text, supports multiple pages, menus, image gallerys, flash slideshow creation, email forms, and more.

Hope it helps someone,

Chris
Atcony's Avatar
Computer Specs
Member with 33 posts.
 
Join Date: Aug 2007
Experience: You Decide!
24-Aug-2007, 05:38 AM #10
Hello Chris,

Welcome to TechGuy!

That's a great plugin. Thanks for sharing with us. Hope to see you around often.
WebKing27's Avatar
Computer Specs
Member with 70 posts.
 
Join Date: Dec 2006
Experience: Advanced
06-Sep-2007, 04:55 AM #11
Yep, that's a useful plugin, very neat and clean. Thanks for sharing.

Atcony,
Quote:
CSS Design Mockup - Here you will find a quick step by step instructions on how to get it done.
The site mentioned by you is good too.
Closed Thread

THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
WELCOME TO TECH SUPPORT GUY! Are you looking for the solution to your computer problem? Join our site today to ask your question -- for free! Our site is run completely by volunteers who help people like you solve computer problems. See our Welcome Guide to get started.



Thread Tools


You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 11:09 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.