ricardocabellov5.0b alter-egos trace mr.doob r08028 blogdemoscenefeaturedextrascontact

*blog... kind of... *rss « Windows XP Updates... ... New mr.doob's website+... » Designing websites efficiently with Photoshop CS2 20.02.2007 11 comments One of the things you can't do when you work on a team is to adapt the new technologies as fast as you can as when you work by your own. This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well... Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one. When you design the flatscreens for a standard website, you end up doing it in 2 ways: 1st way: projectname_aboutus.psd projectname_technology.psd projectname_services.psd projectname_contactus.psd So each .psd has the content and layout for each section. Benefits: You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast. Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it. 2nd way: projectname_design.psd (with folders inside it for each section) Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part). Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder. Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see: 3rd way: (the good one) includes/projectname_header.psd includes/projectname_footer.psd projectname_aboutus.psd projectname_technology.psd projectname_services.psd projectname_contactus.psd The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;) How-to: 1. Create a new file. 2. Add a text inside it. 3. Save it as footer.psd. 4. Create another file. 5. Create a layer (I named it footer container). 6. Draw anything inside the created layer. 7. Go to Image / Variables / Define... 8. On the layer selector, select the layer that you created. 9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is". 10. Click on next (Data sets), and then click on that little disk with an arrow pointing down. 11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button. 12. Select the file footer.psd 13. Click on Apply and then OK At this point you should be seeing whatever content you had on that external file replacing the layer you created. Clean, fast, and without duplications. posted by mr.doob at 01:24 11 comments written so far As blackpawn would say: this is awesome! posted by sole 20.02.2007 , 08:14 Wow! This is a very useful tip. thanks posted by Han Sanghun 20.02.2007 , 15:40 Now that was a great tip. Thank you!! :) posted by Jcl 21.02.2007 , 01:03 El dia que el CS2 no me coma el 90% de los recursos del ordenador... lo mismo lo pruebo... posted by humphr3y 21.02.2007 , 09:21 Well I just tested this out, and maybe I'm doing something wrong, cuz this isn't impressing me too much. The problem is, after setting up the "linked" layers in multiple docs, then making a change to the original linked file, you have to go back in to each doc and manually update it (which is about six clicks through the clunky variables windows). Using variables is really no better than doing file > place > smart object (linked psd file). This way actually is fewer clicks to update the doc each time. To update multiple files you first select the smart object layer (in each file), then layer > smart objects > replace contents. But neither way is perfect.... sigh. posted by jethro 26.02.2007 , 20:08 Oh, I think I figured it out. Apply data set > apply. That speeds up the updating process a bit... posted by jethro 26.02.2007 , 21:27 I think Jethro either didn't test it completely, or he's simply high-maintenece. Maybe both. Anyway, it only takes two clicks to update it- not six. It's a great tool for managing PSD elements across multiple files. posted by catmissile 26.02.2007 , 21:29 Thanks catmissle. P.S. You spelled maintenance wrong. posted by jethro 26.02.2007 , 21:33 Touche posted by catmissile 26.02.2007 , 21:35 Your trick is also interesting Jethro. posted by mr.doob 27.02.2007 , 05:55 Wow this is a great tip for designers. Simple and more organized thats for sure! I just tested it out. Works very nice. I will be applying this to future projects at work. Thxs!!! M posted by Mike 19.03.2007 , 20:07 SORRY! Is not that I don't care about what you have to say, of course I do, but they are speaking louder and I lost my patience :(

*profile  traditional id: Ricardo Cabello Miguel based in: London, UK serving to: Hi-ReS! contact me: click here  *latest posts  * The Magic of Viral (10.10.2008) * Jonathan Harris: Beyond Flash, an adde... (06.10.2008) * Zeitgeist: Addendum (05.10.2008) * Crisis (03.10.2008) * Youtube, now in Super HD! (30.09.2008) * Adobe AIR for Linux - Beta (28.09.2008) * What does the Google Chrome logo inspi... (28.09.2008) * Diesel: SFW XXX (25.09.2008) * Muffler - August 2008 - Australia Tour... (22.09.2008) * e-definition of creepy. (21.09.2008) * Demoparty deadlines in real life. (20.09.2008) * Service Pack 3 Setup Error, re-revisit... (16.09.2008) * Not everybody can say ... (11.09.2008) * Service Pack 3 Setup Error, revisited (10.09.2008) * The Internet (2008) (10.09.2008)  *latest comments  * C++, SDL Coding? Maybe.. ;) (Preview) (trace) * C++, SDL Coding? Maybe.. ;) (Preview) (Joey) * La picaresca (spt) * Mr. Slip Up (ricardo) * La picaresca (ricardo) * La picaresca (spt) * La picaresca (sole) * Demoscene @ Cirsa (sml) * La picaresca (humphr3y) * La picaresca (alfio) * fiver2's new baby: debris (Jcl) * Barcelona = full of shit(s) (Soli) * Demoscene @ Cirsa (Scener) * Rar & unrar with Ubuntu (SethPlate) * Mindcandy 2 (Jcl)