Since I discovered Layer Comps in Photoshop, I have become a bit of an evangelist for them as its made my worklife so much easier. I tend to use photoshop about 80% of my time so anything that can make things more efficient is brilliant. I mainly use them for designing websites, but I have also used them for iPad and iAd designs.
The Layer Comps palette certainly doesn’t replace the Layers palette, but simplifies it when working with a file with different versions. Take for instance, a mockup for several different pages of a web site. Some elements may stay the same from page to page (e.g. header, navigation…), while much of it changes (e.g. text, photos…). Turning off 15 layers and turning on a different 15 just to flip between pages can be tedious and a waste of time. Instead, you can do it once, create a Layer Comp, then always be able to flip back to that set at any time.
Some of the advantages I have found are:
Design changes are faster if all your files are in the one document.
Files are more accurate as you can easily flick through the compositions and compare one page to the next instead of turning the layers on and off with visibility. This accuracy is especially relevant in navigation and how the website flows from the homepage to the sub levels of the site.
Presenting to co-workers & clients is much quicker (once again instead of turning the layers on and off with visibility).
Exporting all the individual compositions is automated by using: File > scripts > layer comps to files.
Granted, layer comps are a bit buggy with the alerts appearing if you modify layers (this is the main complaint I hear about them and tends to put people off), but the alerts never affect any of your actual design layers and you just need to remember to update your layer comps (in the layer comps options area) regularly when designing.
I usually start implementing them when I am at a point where I am happy to show the design to someone, and not at the start to avoid too many alerts.
Here is a sample of a PSD with 3 layer comps:
To start using layer comps just go to Window > layer Comps in Photoshop, when you are happy with the layout - add a new layer comp (the little page at the base of the options palette). Then make a change and add another layer comp. Flick between the 2 comps you have created and you will see how you can create different states.
I was getting this corrupt error all week from Flash CS4 file I had worked on about 2 months ago.
The error wouldn’t even let me open the file, let alone look at debugging it.
I had a few backed-up versions of the file, and all of a sudden they were all corrupt.
I also tried opening the file on other computers with CS4.
I tried installing updates but after searching online for a while I was no closer to finding the solution.
Solution:
I remembered I may have been using CS5 to create the original files, as I was using a different computer. So I downloaded a CS5 Trial and the file opened fine.
I’ve just finished my first iAd Design (I will post a link when live), and getting my head around the specs was quite tricky. I haven’t seen the finished ad yet (I think apple dev time at the moment is 4 weeks), but these are the spec’s I used to create it. I designed the 2D interface, and the 3D Video Intro was developed separately.
You will get a spec from Apple when you are working with them, this is a summary of that with some extra stuff I discovered along the way.
1 for iPhone retina screen (200%) - 640 x 960 (72 ppi) screen size.
1 for older iPhone screen (100%) - 320 x 480 (72 ppi) - 50% of above mentioned size.
Provide them with jpg previews (or layer comps) of each screen
I put everything in 1 PSD while I was developing the design, but later I was asked to separate them into separate PSD files (i.e. Banners, Preloader/Reveal Graphic, Navigation and Core Ad Unit - 3D intro was separate).
If you have to slice the file:
provide the images as either gif/Jpg/PNG (preferably 80% quality)
Try not to use too much transparency as it will increase the file size.
Banner Ads, you MUST provide both landscape and portrait sizes
(Portrait) 640 x 100 (and 50% of this size for older screen)
(Landscape) 960 x 64 (and 50% of this size for older screen)
the size of each banner must be NO MORE than 20kb (so depending on size for this you may need to cut down animations/effects).
Immediately following the splash page, the video should last no longer than 15 sec
On any other part of the iAd, the video should not last longer than 60 sec.
Duration for video in total is 2 minutes.
Buttons for usability
You can have a “DONE” button that acts as a “skip intro” element to the video intro. See the Nissan Leaf video intro, there is a “MENU” button similar to this.
You should provide the dev team with the files as scamps early on for animation/usability testing if possible.
Other Issues
Consider whether the ad needs to be designed for Portrait, landscape or both as it will restrict the Apps you can advertise in.
I would have little or no scrolling content/copy on iAds, because it really is an ad at the end of the day, and people aren’t inclined to read to much copy when viewing an ad.
I have always had issues with hair on different backgrounds, so I often refer to this tutorial when I have to mess about with hair, its quick and relatively easy.
Here’s a quick rundown of the steps:
Duplicate the layer 3 times
Turn off first 2 layers visibility
LAYER 1
Double click on the visible layer and in the “blend if” section of the overview.
Press “ALT” & click on the right hand toggle (the Left half of it).
Move both toggles to get desired removal of white area.
LAYER 2
Multiply.
LAYER 3
Mask layer & fill with black.
Brush and fill in desired image area (make sure brush is feathered for the edges).
Select “images section” of this layer.
Select burn tool (Range-highlights/exposure100%) for white areas and burn areas of the edge that have a while halo.
I have recently been shown the wonders of scripting in Photoshop, and it seems to be making my life a lot easier, here’s a quick run down of how to do it:
1. Download and install/drag your script here: (PC) C:\Program Files\Adobe\Photoshop (CS or CS2)\Presets\Scripts\ (MAC) Applications> Photoshop (CS or CS2)> Presets> Scripts.
2. Restart Photoshop 3. Open Photoshop and the file you want to use it on 4. Select File >scripts. 5. Run the script
You’ll see Photoshop (well CS5 anyway) has some scripts already installed, its pretty straightforward from there.
I just got back from the SXSW Interactive festival in Texas, it was the first time I have been and it was a really good week. Some highlights for me were the panels on HTML5 Vs Flash, new interactive systems from Microstoft/Razorfish and the free drink!.
This is one of the multi-touch displays. It was really fun to play with and you can see people using them in malls and tube stations etc.
This is footage from the Frog Design party we went too:
They gave you a card which was represented by a digital star map, each time you get a drink, connect with people or get your picture taken your star gets bigger. Some guy was hooking up with everyone and he was like a supernova!.
This is a new site I worked on with Davo and James, Its built using Django for content management and Jquery for the transitions. Its a small site but a nice one. Check out the rollovers on the homepage and the artists detail and Gallery pages. www.mortonmetropolis.com.
