PS + web layout
- Started
- Last post
- 17 Responses
- genfour
what are your tips/tricks to laying out a website precisely in photoshop?
I'm usually doing print and using illy/id and I'm finding it difficult to lay out a website accurately. I'm used to illy tools like the shape marquee tool (clicking and entering exact dimensions), the Move tool (selecting, pressing enter and moving by exact # of pixels), and offset path to layout objects precisely.
PS won't even give me dimensions in the info box if I select a path! I tried using smart guides, snap to grid/guide, and building off of a 960px guide and found myself wasting a lot of time trying to make up little .5-2px discrepancies in the CSS.
The other thing I tried was laying out a wireframe in illy and copying/pasting the paths into photoshop. Or exporting the illy guide into PS. Both options are kind of cumbersome when it comes to making layout changes, and still didn't give me the accuracy I was looking for.
What is your workflow?
- Continuity0
Fireworks could be an option for you. It handles more like Illustrator, insofar as selecting objects, entering the numbers of pixels for placement, etc.
- i'll have to look at FW again... with this site I'm using layer styles in PS thoughgenfour
- Nightshade0
+1 for Fireworks. Pages, copyable guides, re-usable symbols.
The only annoying as fu-k thing is sometimes when you group or make a symbol it shifts the object by 0.5px so it blurs.. very annoying. Also you have to save frequently as mine crashes fairly regularly when dealing with FW docs with lots of pages. But apart from those two things, it's so much better than web than PS.
- <Josev
- cmd+K, snap to pixel fixes the 0.5 issueanimatedgif
- detritus0
You have reset your grid and keyboard increment settings, using pixel values, in preferences, right?
Also..
• Ensure your doc is rgb, 72 dpi
• set pixel layout and use cursor keys to force whole pixel values
• Use the 'Control' dialog to input absolute values to set positions and object sizes
• Don't forget you can drag from the top left corner to reset the 0,0 point in a layout that incorporates browser chrome
- noob123450
I use very few vector shapes in PS. what I do is-
Window>Info to see the size of my selections
command A to select everything
V key to get move tool
right arrow, left arrow to get the selection to constrain to whatever is on my layer
the info window will give me dimesions for what ever is selected- You could just cmd+click the layer thumbnail. Might be faster.********
- You could just cmd+click the layer thumbnail. Might be faster.
- noob123450
This is also super useful for setting up a grid
http://gridulator.com/
- animatedgif0
Use Fireworks, Photoshop is fucking atrocious for website design unless it's a photo heavy movie style site. It has it's quirks but once you get it then Photoshop feels like a fucking joke to do web design in
Fireworks has pages, pixel snapped vectors, FAR superior object selection, copy and paste styles, Documents are smaller/load faster, Flash style symbols so I can set say a promo box as a symbol and then if I need to change the copy I change it once and it'll change across all 50 pages of the website then File>Export and it'll create 50 jpegs of the new change across the entire site, stackable noise/gaussian blur layer styles, better alignment tools (set them to shortcuts like ctrl+shift+arrows)
and this motherfucker > http://johndunning.com/fireworks…
So I set up a vector button, it's pixel perfect and I can just select it then hold option+shift and hit right arrow key twice to make it 20px wider. Can work so much faster than someone in Photoshop who would have to either select vector points by hand with a vector element or marquee select and fill 20px next to the button < FUCKING LOL!
"The only annoying as fu-k thing is sometimes when you group or make a symbol it shifts the object by 0.5px so it blurs"
CMD+K - Snap to Pixel fixes this- oh Fireworks has a rounded %/px setting on all rectangles too that you can change at any timeanimatedgif
- I understand PS has smart objects, but they're a hack compared to FW symbols.animatedgif
- animatedgif0
Use Fireworks, Photoshop is fucking atrocious for website design unless it's a photo heavy movie style site. It has it's quirks but once you get it then Photoshop feels like a fucking joke to do web design in
Fireworks has pages, pixel snapped vectors, FAR superior object selection, copy and paste styles, Documents are smaller/load faster, Flash style symbols so I can set say a promo box as a symbol and then if I need to change the copy I change it once and it'll change across all 50 pages of the website then File>Export and it'll create 50 jpegs of the new change across the entire site, stackable noise/gaussian blur layer styles, better alignment tools (set them to shortcuts like ctrl+shift+arrows)
and this motherfucker > http://johndunning.com/fireworks…
So I set up a vector button, it's pixel perfect and I can just select it then hold option+shift and hit right arrow key twice to make it 20px wider. Can work so much faster than someone in Photoshop who would have to either select vector points by hand with a vector element or marquee select and fill 20px next to the button < FUCKING LOL!
"The only annoying as fu-k thing is sometimes when you group or make a symbol it shifts the object by 0.5px so it blurs"
CMD+K - Snap to Pixel fixes this
- ESKEMA0
Use the grid to position everything. I usually have mine set to 10 pixels with 10 subdivisions, but sometimes change it according to what I'm making (if I'm making a 16px icon, I change the grid to 8 with 8 subdivisions so I have it centered).
When selecting a shape layer, do +T (Free Transform), that way you'll see it's exact position and size and can make exact changes to it.
Use shape layers as much as you can, those bitches are really life savers (you can have them all in just one shape layer, remember to select "Add to shape area")
- non0
Coming from a workflow wich uses InDesign and Illustrator, I really like Fireworks for web design. The only major flaw is that its not as "snappy" as PS. There is always annoying millisecond lag everywhere.
Anyone has an idea why it does this? I'm on CS5 with a recent-ish iMac with alot of RAM.
- animatedgif0
non, I'm a big Fireworks fan (used to prefer PS and moved to a job where they used FW and became converted). Fireworks is definitely rough round the edges, this is pretty much down to Adobe mismanagement and the FW team getting a fraction of the resources the PS team has.
Adobe doesn't actually use their own software anymore, so they just seem to assume a photo retouching app is the ideal solution to UI design and don't bother investing time/money into a great product sat under their noses which could become an amazing product.
The lag isn't a problem with your machine, it's just down to antiquated code and things being implemented poorly/hacked together in the first place.
The team has pulled it together a lot lately though, CS5 was the best version of FW in years and was excellent compared to CS4 which was a fucking mess. So I'm guessing/hoping FW CS6 will be another low on features big on optimisation release.
^
If you haven't tried FW don't let this put you off, the benefits outweigh the negatives.
- Continuity0
FW has always been a little scrappy, even back in the Macromedia days (although I do find it performed a lot better until Adobe took it over). That said, at the time, it filled a massive void in the market. between FW and FH, those were great days.
- fadein110
Avoid Fireworks... Use PS.
You don't need pages - just group layers and use comps.
You can duplicate symbols using smart objects and copying layers.
PS way more flexible, Fireworks is bollocks IMHO.- While you're fiddling with your layer groups i'm page up/downing through screens like a bossanimatedgif
- no fiddling involved
fadein11
- ntimm0
screw psd, make it in illustrator.
but then again, the programmer will probably import the work in psd to export it for the web.
- Continuity0
To Hell with Illustrator, make it in Quark!
