P-Shop or Illstrtor. for Web Comps
- Started
- Last post
- 31 Responses
- pablink
Hey there,
I have been working on a project that requires me to comp a text-heavy web page with several sections/lists and typographic hierearchy and usually i work in PS.
I've found that is frstrating to experiment with different styles and try different color palletes in PS. Illustrator lets me change texdt styles, and color easily, but at the end text looks more close to a page when I work in PS....any thoughts on this? Would like to hear opinions
- madirish0
IMO, and this is definitly a personal designer-thang; but to 'design' web pages in PShop is a waste of time/joke. PShop was never intended to do this and seriously has been hacked by Adobe over the years to accomodate it. you have far more flexibility and power w/ vectors than PShop's bitmap capabilities. i know the ravens will pick at me for this, but designing in vectors for graphical layout is the most 'pro' way to go about designing web sites, again IMO.
you can mimic all text qualities in AI as well by rasterizing all text (for PC displays) and such. the *only* thing i hate that AI still does not have for sone crazy reason, is an underline function for text. otherwise, all styles work flawlessly. to do the underline style however, you can import one created in PShop and then record it as as style in AI. here is the link how-to: http://www.stopdesign.com/log/20…
- CyBrainX0
If you have CS2, you can work your text in Illustrator, copy and paste it into Photoshop as a smart object and everytime you edit type in illustrator, it will update in Photoshop when you go back.
- pablink0
Cool, thanks for the link MadIrish... I'll force myself keep working on illustrator and will post my results.. i just found i can apply styles to linework (i.e.: dotted , colors, weights and update them ....this flexibility is dangerous, lol)
- pablink0
".....you can mimic all text qualities in AI as well by rasterizing all text (for PC displays) and such...."
How do you do this Irish??
-p
- tommyo0
The solution you might want to think about is Fireworks. I don't use Fireworks for art heavy sites, but it's the perfect solution for linear site layouts. Easy to slect and change vectors like Illy, but works a bit more like PS.
- madirish0
How do you do this Irish??
-p
pablink
(Apr 23 06, 08:45)- select text field you created
- go to Effect menu @ top
- select "Rasterize..."
- choose 72dpi
- background: transparentbooyashaka...
- pablink0
WHOA!!! NICE!!!! thankds so much madirish you rock!!!!
tommyo: i'd like to try fireworks as well...i guess it will have to be next time since i have this comp close to finalized...
yay!
- tommyo0
yeah some people like FW some don't. At first it will feel a little confining and the type editing isn't all that fantastic yet, but it's a nice compromise between Illy and PS for web comps.
- welded0
How do you do this Irish??
-p
pablink
(Apr 23 06, 08:45)A better way would be to flip the bitch into pixel preview mode. I don't use it often, but off the top of my head I think the shortcut is Cmnd+Shift+Y. It's under the View menu with overprint preview and so on.
- madirish0
no problem pablink.
welded- super-good tip. i forget about that very rarely used view setting. i will have to do that more for some smaller layouts. thanks!
- pablink0
Weel its been quite some time since my Illsutrator migration: so what I've been sticking to is:
- Use AI as my master app
- Pixel preview mode
- Raster Effects for fonts (it f$ks the kerning in some of them but i deal tih it since the medium will be HTML)
- Textures and other FX are done in p-shop and brought back to Illustrator as links so I can update easily: (Useful when playing with buttons and bullets)
- Use Character Styles, Graphic Styles and Global Colors for quick variations and experimentation
- Set a Grid with divisions every 10px and 10 subdivisions
- Check Snap to Grid-p
- ender790
that sounds interesting, pablink. i might have to try that. how is it working for you compared to when you used photoshop?
- pablink0
If Image heavy: p-shop
If text - heavy : illyI gets as bit to get used to but I think its worth it when you have to replace the 40 paragraphs and 20 lists of "Lorem Ipsum" with real content from the client for the 12PM review and you were stuck in the NYC subway for 2 hrs and just got 10 minutes..... try that with p-shop- lol
- PonyBoy0
Enter response:
"Once I’ve honed in on a final design [in Illustrator], then I move over to Photoshop for a final polish and pixel-level precision for the site’s images."
... yep... but also -
I've learned to realy on smart objects w/CS2 and work back and forth w/illustrator and PS. I start in illy... get my pixels exact (corners, anything that's a solid lined object etc) and then begin moving the design over into photo shop - but bringing all the peices in as smart objects or paths depending on the need. Smart objects ROCK because all you have to do is double-click the layer and a temp illy file will open so you can edit it's contents (color, pixel count... etc)... then save it and jump back over to PS for the update. Any layer effects that you had applied to it in PS will stay the same... only the original .ai info will update...
... why is this good?!
Well - if you work with smart objects in PS... you CAN SCALE THEM TOO!! :)... meaning - the client gives you a lil jingle:
you: Hello?
client: love the site! need a brochure!
you: heeeey... i built it in ps at 72 dpi/ppi... i'll have to rebui...
*cough cough
... um... just change the resolution to 300dpi and tweak it a bit... and make sure to get hi-res photos of course and be done with it!!moral of the story - smart objects are indeed smart... super handy!
- enfocusmedia0
haven't used Fireworks in this new millenium...
- monoboy0
Rastering type in Illy, how feckin' marvelous. Been trying to find a good way to do that.
Nice tip! And it's still fully editable. Ace.
- rasko40
I am never happy dealing with type layout in ilustrator fopr the simple fact that you have no control of 'space after' unless you do it manually using double paragraphs.
- monoboy0
Use a text box instead, then you can edit fully. Works a treat.
- moth0
I wouldn't say using photoshop is a joke. It works perfectly well for me. It's limited vector support seems to cover my needs just fine.
Does AI have all the web optimisation tools that PS has? Like "save for web"? Because I couldn't work without that when it comes to production.
- monoboy0
Yup, uses the same export functions as PS.