Sign In »
Register Now!
Help
Hi.
Ive never made a site this way and would like to try it. But im a but unsure of exactly how to do a few things.
So i design a full layout in photshop and Thats all good, but when you save the design it gets saved as one whole image, so how do we break it into seperate groups, like header, footer and so forth. Im ok with CSS and HTML so i can follow the turorial pretty fine.
Just unsure of how to cut me design into sections on photoshop so i can code it in CSS. do i make sense?.
This is the tutorial i was trying to do.
http://www.thewebsqueeze.com/tutorials/a-w...m-a-to-z-14.htm
I really want to try this but with my own design.
Just confused as to how to save the design and if i need to cut it into sections on photoshop.
Page 1 of 1
The Css Tutorial On This Site
#1
shammy2007 
- Fresh Squeezed
-
- Group: Members
- Posts: 10
- Joined: 16-February 08
Posted 16 February 2008 - 10:32 PM
#2
karinne
- Valued Member
-
- Group: Members
- Posts: 5,373
- Joined: 13-February 08
- Gender:Female
- Location:quecque part dans l'Quebec in Canada eh?
Posted 16 February 2008 - 10:56 PM
Hi shammy,
the tutorial was mostly geared towards showing people how to structure your HTML properly with the proper divs and not over-loading it (divitis).
I am planning on making a "How to slice up your site" tutorials very soon ... hopefully in the next week or so.
I'll give you a little insight tho
When cutting your site in PS, it very important not to cut EVERYTHING. Try to look at it from a totally CSS point of view. Image you didn't have photoshop at all... just HTML and CSS. What can you apply as simple background-color?
The only thing that you should be cutting/slicing from PS is your logo and *some* backgrounds.
Hope this helped.
the tutorial was mostly geared towards showing people how to structure your HTML properly with the proper divs and not over-loading it (divitis).
I am planning on making a "How to slice up your site" tutorials very soon ... hopefully in the next week or so.
I'll give you a little insight tho
When cutting your site in PS, it very important not to cut EVERYTHING. Try to look at it from a totally CSS point of view. Image you didn't have photoshop at all... just HTML and CSS. What can you apply as simple background-color?
The only thing that you should be cutting/slicing from PS is your logo and *some* backgrounds.
Hope this helped.
#3
rewake
- Rapid Squeezer
-
- Group: Mentor
- Posts: 429
- Joined: 14-February 08
- Gender:Male
- Location:NY, USA
Posted 16 February 2008 - 10:59 PM
Hey Shammy,
Photoshop Slices will become your best friend! You create the slices in the PS document and then save for web, where by PS will cut, name and optimize each piece for you. Photoshop will even generate and HTML page for you, although it's no where near usable in a real world situation.
I think I'll work on a quick Slicing tutorial as I know a lot of people who could use the info.
Rich
Photoshop Slices will become your best friend! You create the slices in the PS document and then save for web, where by PS will cut, name and optimize each piece for you. Photoshop will even generate and HTML page for you, although it's no where near usable in a real world situation.
I think I'll work on a quick Slicing tutorial as I know a lot of people who could use the info.
Rich
#5
Jason
- Master of the Universe
-
- Group: Mentor
- Posts: 2,537
- Joined: 15-February 08
- Gender:Male
- Location:London, England
Posted 17 February 2008 - 05:44 AM
How do you make websites if you are not slicing an image Jack?
To slice a layout you need to use the slice tool.
http://www.entheoswe...oshop/slice.asp
To slice a layout you need to use the slice tool.
http://www.entheoswe...oshop/slice.asp
#6
Jack
- Squeeze Machine
-
- Group: Members
- Posts: 682
- Joined: 16-February 08
- Gender:Male
Posted 17 February 2008 - 06:44 AM
I just design in Photoshop, and then usually print it out, stick it on my desk, open Dreamweaver, and recreate it.
[url="http://"http://www.jackfranklin.co.uk"]www.jackfranklin.co.uk[/url]
#7
Jason
- Master of the Universe
-
- Group: Mentor
- Posts: 2,537
- Joined: 15-February 08
- Gender:Male
- Location:London, England
Posted 17 February 2008 - 07:22 AM
By slicing with photoshop you can create patterns, logo's, images and effects that you cannot create with CSS and HTML. By including these sliced images you will be able to create more interesting and eye catching designs.
To be clear, all you are doing when you slice a photoshop layout is provide yourself with small web-ready images that you can use during layout coding.
Without these images you will be limited to block color, standard fonts and no custom images.
To be clear, all you are doing when you slice a photoshop layout is provide yourself with small web-ready images that you can use during layout coding.
Without these images you will be limited to block color, standard fonts and no custom images.
#9
karinne
- Valued Member
-
- Group: Members
- Posts: 5,373
- Joined: 13-February 08
- Gender:Female
- Location:quecque part dans l'Quebec in Canada eh?
Posted 17 February 2008 - 11:03 AM
Yeah ... I NEVER use the slice tool! It's bad, bad, bad! 
PS should only be used as you would Pen&Paper but on steroids
When re-creating your site, you should only have a very few images: logo, a background. That's IT!
Using the slice tool in PS creates the whole thing in image... instead of having only 3 or 4, you'll end up with 20 useless filler gifs.
PS should only be used as you would Pen&Paper but on steroids
When re-creating your site, you should only have a very few images: logo, a background. That's IT!
Using the slice tool in PS creates the whole thing in image... instead of having only 3 or 4, you'll end up with 20 useless filler gifs.
#10
Sharron
- Squeezing
-
- Group: Members
- Posts: 78
- Joined: 13-February 08
- Gender:Female
- Location:Texas, USA - North Central Texas
Posted 17 February 2008 - 11:11 AM
I too have designed in PS, but I've learned to stay away from the slicer! I design in layers! then convert to css and xhtml. It does not always turn out to be and exact replication though. Besides sliced tend to save in a table layout, so I've then had to convert from tables to divs and that can be frustrating to say the least.
I think I'm going to like this place.
#11
Jason
- Master of the Universe
-
- Group: Mentor
- Posts: 2,537
- Joined: 15-February 08
- Gender:Male
- Location:London, England
Posted 17 February 2008 - 11:38 AM
karinne, on Feb 17 2008, 04:03 PM, said:
Using the slice tool in PS creates the whole thing in image... instead of having only 3 or 4, you'll end up with 20 useless filler gifs.
Select what you would like to slice.
Save for web
Choose file format etc, click OK
Choose 'user selected slices'
Photoshop will then save only your slices to a folder called images. These can then be used when you hand code the website.
You will not have lots of filler images, you will not have photoshop generated tables. You will quickly gather all of the images and backgrounds that you require for your website. You can then handcode the template.
This post has been edited by JasonStanley: 17 February 2008 - 11:39 AM
#12
karinne
- Valued Member
-
- Group: Members
- Posts: 5,373
- Joined: 13-February 08
- Gender:Female
- Location:quecque part dans l'Quebec in Canada eh?
Posted 17 February 2008 - 12:15 PM
Thanks for the tip Jason but I've always found using the slice tool to be a waste of time for me since I only usually use 3 or 4 images anyway.
#13
Daygon
- Rapid Squeezer
-
- Group: Members
- Posts: 217
- Joined: 13-February 08
- Gender:Male
- Location:Houston, Texas
Posted 20 February 2008 - 06:29 PM
me personally i just splice out the backgrounds that i need and any logo's or images... thats it... it gets the job done and clients are satisfied as long as it all looks good and valid
Jonathon Harrelson
Portfolio: Jonathon Harrelson Portfolio
My Job: EGA Web Hosting and Design
Available for work
Portfolio: Jonathon Harrelson Portfolio
My Job: EGA Web Hosting and Design
Available for work
Share this topic:
Page 1 of 1
Page 1 of 1
| Trackback URL | Trackback Date | Total Hits |
|---|---|---|
Page 1 of 1
| Topic | Started By | Stats | Last Post Info | |
|---|---|---|---|---|
 |
Thoughts On My Shopping Site?
If your a pro designer, I'd love to hear your thoughts! |
rickc |
|
|
|
New To The Site
Hello from Bluepearl Design |
Sean |
|
|
|
Uk Based Autism Site
This is my autism site love to hear your thoughts |
AboutAutism |
|
|
|
Site Layout
It's an oldie, but I'd love some feedback! |
rewake |
|
|
 |
Please Review My Site And Blog
|
marSoul |
|
|
RSS Feed
Email Feed
TWS Podcast
@thewebsqueeze
TWS on Facebook
TWS on LinkedIn
TWS on YouTube