What is Digg?45 Comments
- eleven, on 10/12/2007, -0/+28There's nothing like visiting a site that was wholly exported by photoshop *rolls eyes*
I cant count the number of sites that I come across which have been produced this way. They look great, they have horrible code, they don't index in search engines and they make you download about 500K per page. So 30 seconds to produce and about 50 seconds for someone to view with a slow connection - you're saving time at the expense of your viewers. - MSTK, on 10/12/2007, -1/+16Oh my god, this is terrible. Just reading the method is a crime against the internet and a disgrace to web builders everywhere.
- andyhite, on 10/12/2007, -0/+15This is definitely a bad approach to CSS. I've looked at this feature before and it generates poorly structured html and horrible styles. Like eleven said, you're sacrificing your users experience to save yourself some time. Putting together a nice xhtml/css website doesn't take all that long if you have the patience to sit down and learn how to properly structure your markup instead of attack it with div soup.
- joaob, on 10/12/2007, -0/+10Now only if someone can digg
"How to clean up the disaster of code that Photoshop outputs in less then 24 hours" - inactive, on 10/12/2007, -1/+10Copy and pasted from google cache:
"As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document.
Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ? If you want to know how do it everything is explained step by step with proper screen captures just in case ;)
(There’s plenty of books about CSS but few are really good, i would recommend you this one :
The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter)
Yep you’re not dreaming this is possible, read on ! :)
1-open your file with photoshop
ouvrir le
2-Edit the document with Image ready
editer dans image ready
3-Slice your document using the “Slice” tool, this will allow you to define all the different parts of your web page (for example, the header, the menu etc.)
outil de slice
4-Now your document should contain blue numeroted squares and lines
résultat de l'image slicées
5-Now you need to specify in image ready the ouput parameters.
output settings
6-Now you choose the CSS export (inside the File->Outputsettings menu)
choisir le css
7-Now you have defined your output options you just have to click on OK. (this will validate your settings but won’t create the file yet).
8-This is the last step, you need to save the result, using “Save optimized” (inside the File menu).
sauver le résultat
And now the work is finished,imageready has just created an “images” folder containing all the sliced images and an html file which is containing in the source code the css code.
If you wanna see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.
afficher le code source
-Extract of the css code generated by photoshop/imageready:" - chadu, on 10/12/2007, -1/+8holy balls! i thought that digg users were smarter than this. this is absolutely ***** webdesign.
- inactive, on 10/12/2007, -0/+7Well their site's dead now so I don't think many others will have to worry. Dugg to death.
- spect3r, on 10/12/2007, -0/+7Yikes! No no no!!! Don't do this!
- armbar, on 10/12/2007, -0/+5It's almost as good as Dreamweaver's .style1, .style2 anarchy.
If you're this lazy and bad, you don't deserve to be a web developer without a heck of a lot more learning. - adjustafresh, on 10/12/2007, -0/+5This tripe was passed around several months ago, and it is absolute nonsense. When the initial article was posted, the blog was using the default WordPress theme, so much for taking your own medicine. Unfortunately, the site's been nuked so I can't tell if the guy has actually used his method to design his own website.
Attention CSS newbs - this is a bad idea. - npowel, on 10/12/2007, -2/+6Convert to "a CSS"? wtf? :P
- chadu, on 10/12/2007, -0/+4and punched.
- NicksVideo, on 10/12/2007, -0/+4Webdesign for the lazy.
- cosmicr, on 10/12/2007, -0/+4you dont design web pages using photoshop
- misterjangles, on 10/12/2007, -2/+5I personally like having Photoshop do the image slicing, then hand code the HTML/CSS.
- npowel, on 10/12/2007, -0/+2At least 5 people have posted better methods.
Basically, write the code yourself. Need an image in it, use Photoshop to make it :P - chadu, on 10/12/2007, -0/+21. Don't use the slicer tool.
2. Turn off layers for areas you don't want to include in the image you are currently preparing.
3. Use the rectangle marquee to get as tight of a crop as you can around the shape's bounding area.
4. Copy merged layers
5. Paste into new doc
6. Save as transparent PNG if transparency is needed, use JPEG if not (Use Save for Web).
7. Write your HTML and CSS by hand, because you are a professional.
I'm sure some will digg me down for not using some top secret ninja like practice, but I have created dozens of sites that use clean standards compliant HTML and CSS, have nicely optimized graphics and don't rely on some auo method... I have used the Photoshop/Imageready cutup method, it just makes crap. Bloated files, non semantic HTML and all that garbage.
You want to make a web design the right way, learn CSS yourself, don't rely on software. - serpicolugnut, on 10/12/2007, -4/+6Some people will Digg anything.
Here's an idea for an article - "How to get your post on the front page of Digg in 30 seconds or Less".
1. Type up post, and in the subject line, use any of the following phrases:
Apple, Zune Sucks, Ubuntu Linux, CSS, Web 2.0, Woz, Mark Shuttleworth, Woz, Steve Jobs, Woz.
Hit Submit. Enjoy your 900 Diggs by people too lazy to read the article. - rprouse, on 10/12/2007, -0/+2While I do agree that the HTML and CSS that is produced is not very useful for a real site, I do find this useful for cutting up a site prototype image quickly and then doing the HTML/CSS by hand.
- westfork, on 10/12/2007, -0/+2Anyone that would allow Image Ready to create white .gif's or .jpg's for white space, and then upload the bloat as a web page, deserves to be laughed at...
- RocketSeason, on 10/12/2007, -0/+2Beeeyah!
- scuzzman, on 10/12/2007, -1/+3The proper way is to sit down, learn XHTML and CSS, and write your markup. The problem with this method is that it makes horrid markup that's nearly impossible to parse and even worse to read.
- inactive, on 10/12/2007, -0/+1if this is so bad why are people digging it like crazy?
granted, i would never do my css in this way :) - anthrt, on 10/12/2007, -0/+1Duggmirror didn't even pick it up.
- rampy, on 10/12/2007, -0/+1dugg for the intersting digg comments...
- upsidedork, on 10/12/2007, -0/+1You can nab it from archive.org, if you're patient:
http://web.archive.org/web/20060524125014/http://www.duclaux.net/blog/how-to-convert-your-photoshop-document-to-a-css-in-less-than-30-seconds-a-precise-tutorial-with-illustrations/2006/02/08/ - tablatronix, on 10/12/2007, -1/+2I can make an Image Map in 10 seconds, doesnt mean im going to.
- KingDaveRa, on 10/12/2007, -0/+1You can't rush art! Well, you can't rush anything like this, if you want it done properly!
- Zeebo44, on 10/12/2007, -1/+2OK after reading 20+ comments that all say the same thing "this method sucks" how about someone posting a link to a tutorial or break down what IS the best way to export a web page designed in photoshop.
- rubicante, on 10/12/2007, -1/+2... Wii, PS3, Kevin Rose.
- idioteque1025, on 10/12/2007, -0/+1@ npowel
CSS = Cascading Style Sheet
So in this case even though the article isn't worth the bandwidth to download, the title still makes sense.
"How to Convert your Photoshop Document to a 'Cascading Style Sheet' in less than 30 seconds" - section31, on 10/12/2007, -2/+2http://duggmirror.com/
- bbene, on 10/12/2007, -1/+1Haha. Sad, but somewhat true for some users.
- safiire, on 10/12/2007, -0/+0This is a really ***** way to create a layout for a web page. Photoshop is a great tool for designing a page layout, however just cutting it up into tiles and exporting it save optimized will create ***** XHTML for you, and no reusable styles for text or any other elements, which is the ***** point of using CSS in the first place.
- SteaminTmann, on 10/12/2007, -1/+1It really has to be done with some kind of design in mind, especially if you're going to be adding multiple pages to the site, assuming it's going to be a certain general layout, with only certain things changing.
1. Use the slice tool to make the just the *images* for the site.
2. code a 'page template' along with a stylesheet using dreamweaver or web development tool of your choice,
3. Insert images into said template.
4. work from the template to create other pages based upon that template's design (for consistency)
PS, please, do not use images for the site's copy.... PLEASE - npowel, on 10/12/2007, -0/+0but it isn't making a cascading style sheet. it's making a (crappy) html page with css in it.
a css on its own isn't very much to look at :P - FrankieB078, on 10/12/2007, -1/+1It truly depends on the project, but overall, yes you create your slices so that your images are separated. After that, I start building the CSS/div's from the top of the page down (design, not code). I very, very rarely output CSS from Photoshop. The last time I had done so was for my MySpace profile, to have everything absolutely positioned.
- andyhite, on 10/12/2007, -0/+0I used to utilize the slicing tools in imageready for cutting out the parts necessary in the mock-up to produce my xhtml/css, but I eventually learned that it's almost over-kill in most situations. Most designs only call for 5-8 images from your mock-up to reproduce the prototype in xhtml if you plan it out right, and it's usually quicker (at least in my opinion) to cut those images out using the basic tools in Photoshop.
Of course, to each his own. Whatever gets the job done in the end. Standards dorks (like myself) tend to stay away from the one-click solutions like this article describes because we like to have complete control over our markup. - mrbinary, on 10/12/2007, -1/+11. Create your design in Photoshop, cut it apart, and save the pieces individually (save ONLY the sections of the image that can't be produced by pure CSS)
2. Set up the basic structure of your site using hand coded HTML
3. Hand code a CSS file to match up your HTML with your images - OmegaNine, on 10/12/2007, -1/+1this is why i ***** HATE wordpress
- inactive, on 10/12/2007, -2/+1The tutorial is aimed at amateur developers who don't have the time to learn proper HTML and CSS. Yes, there are people out there who would like a nice looking website but can't afford to pay someone to make it for them.
I know, you've been writing proper HTML and CSS since you were in high school and you learned how to do it by yourself in three days, congratulations. With broadband access all across the world there is no reason to waste your time coding websites in notepad when there are plenty of easier and faster ways to go about your site development. - inactive, on 10/12/2007, -4/+21. make your slices with the slicer tool -- the fewer slices the better the page will render (generally)
2. save the psd file
3. open in image ready
4. file-->save as-->web page
5. after you save as *.htm you will have multiple pics + an html file
6. open html file in dreamweaver which will render your website complete with the output .jpgs
7. make your page in dreamweaver - spindrift, on 10/12/2007, -6/+0http://www.duggmirror.com
- inactive, on 10/12/2007, -15/+1***** css or whatever
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2009
— Content created and posted by Digg users is