Mini PS Project I DUE
Provide a link to your project page and DropBox
The 10 laws of Photoshop etiquette
01. Name your layers
As boring and mundane as it sounds: name your layers. This is the most basic rule of them all – even if it’s a basic descriptive name such as ‘arrow’. There’s nothing worse then trying to find a certain layer within a file containing countless duplicates of ‘Layer Copy’.
Once labelled, organise these layers into group folders; allowing you to move and show/hide various large sections with ease. Layers such as backgrounds or other solid elements that you wish to be preserved should be locked to ensure they don’t get clipped or moved accidently.
Once you’ve completed your task it’s always worth having a quick glance over your file to filter out and delete any unnecessary empty layers (a good way to check if a layer is empty is pressing Command+T). You’d be surprised how many crop up.
02. Structure your files logically
Establish a simple naming convention that not only works for you, but would also work if your granny had to read it. Naming conventions such as ‘New’, ‘Latest’ or ‘’Website-Final’ won’t cut it and I can almost guarantee that it won’t be the ‘final’. An example of a good naming structure could be: ‘Name_Type_Size_Version’.
Why this structure? The company name is the first thing you see to identify the brand of the file. ‘Type’ illustrates what the file is intended for (Website, Email, etc). ‘Size’ is only applicable in certain cases such as banners, whereby you will have various sizes for example: ‘120×600’ or ‘300×250’, and finally ‘Version’, which could be simplied to ‘v2’, ‘v3’, etc, can be applied when making revisions to the original file. It’s good practice to save progress as another file, so you never overwrite previous revisions in case you need to refer back to them.
Seeing these variables in the file name is a smarter way to organize your files and will definitely eliminate any confusion for future reference.
- Also read: How to structure your Photoshop files
03. Mask once
This refers back to point 02 and grouping layers: why apply 10 masks on 10 layers when you can group the lot and mask once? Work smarter, not harder!
04. Save your paths
The pen tool to a designer is like the lightsaber to a Jedi. The better you can use it, the more powerful your skills become. So once you’re done spending hours making the perfect clipping path be sure to save them all, otherwise you risk doing it again later in the job.
05. Don’t stretch text or images
Never stretch buttons or vector shapes out of proportion; especially ones with rounded corners. Always redraw them to ensure you get the correct and consistent shape and style.
Never stretch images either; scale (down, never up) and transform but don’t stretch out of proportion. The same applies for fonts; kern, track and scale but whatever you do, absolutely do not stretch. Never. It’s very unprofessional.
Using smart filters where possible will ensure vector shapes can be made bigger and smaller with no distortions; handy to bear in mind when designing for mobile and retina displays.
06. Align your elements
A sign of a good designer is alignment. So switch on those rulers and get snapping: Snap to grid. Snap to Pixel. Snap to Layer. Snap to something! This ensures both that your designs are pixel perfect and that all elements within your design are easy on the eye.
07. Apply effects gracefully
Avoid the temptation to apply Color Overlay, Drop Shadow, Bevel, Outer Glow and Strokes onto each and every element of your design. It’s a tool job – know the difference between each one and when to use it. The main objective should be to use effects that complement the design and elevate your user experience. Subtlety is the key.
If you’re applying the same effect on numerous elements then its always worth copy/pasting the layer styles to ensure the effects are exactly the same. Also, be aware of the Global Lighting option and when this needs to be applied. When in doubt, turn it off, so you can customize each element and effect to your liking. Otherwise one day you’ll be wondering who changed all the styles in your design.
08. Collect up unused styles and images
After experimenting with various styles or images, it’s good practice to put all these unused elements into one folder titled something like ‘Unused’. Have it switched off at the bottom of the original file (it can be deleted on copied revisions thereafter to keep file-size down).
This rule is an exception to the general rule about removing unused layers. It follows the same logic as keeping various little elements such as icons and small imagery handy just in case you need to make quick changes or additions.
09. Proof-read your designs
Most designers are bad at spelling, so check your text and grammar thoroughly. Ensure everything is spellchecked (and that includes the brief and copy provided) so you iron out any further kinks and your work can clearly be read and understood.
Try not to use text speak. Make it clear so your granny could read and understand it.
10. Make everything easy to find
Once you’re all done with your design, be sure to store it in a relevant location with all stock imagery, web files, and so on nearby – not in a random folder called ‘design files’ or ‘misc’. You’ll probably never find it again, and others certainly won’t.
All these Photoshop etiquette rules may seem like a pain, especially when you’re used to working in your own way. But if you get into the habit of sticking to them, they’ll save you a great deal more pain in the long run. Every little helps. And this acts as a good first step.
TUTORIAL #1 | DO NOW
UPDATED STEP BY STEP | HOW TO ANIMATE A BANNER AD
01. Setting up
Firstly we need to set up our document to the right spec. Navigate to photoshop, create a new document and int he new document dialog box ensure the dimensions are set to pixels and enter 728 for the width and 90 for the height end ensure that the color mode is set to RGB. As we’re working in pixels, don’t worry about the resolution. This is the standard size for a horizontal leader board banner ad.
02. Start designing
Now to start designing the ad. This is going to be a typography led design so I want to keep it bold and graphic using Creative Bloqs brand colors, but feel free to use your own colors and graphic elements to best suit your project.
First create a new layer in the layers panel and make a perfect square selection by holding shift whilst using the rectangular marquee tool. Now fill this with a color using the paint bucket tool and name the layer something suitable, in this case I’ve called it “color block 01”.
03. Fill the banner
Now hover over the square with the move tool and whilst holding alt, drag and duplicate the square so that it snaps to the edges of the original square. Snap will need to be turned on under the view menu.
Keep duplicating the squares until you’ve filled the banner, then select them all by holding shift and ensure that they’re centred in the document. Now simply delete every other orange square to create a simple square grid to base our design and animation on. With all the squares still selected hit Cmd+E to merge all the square layers.
04. Create type elements
Now to start creating the type elements. Hit T to bring up the type tool and draw a square over the first orange square. Make sure white is selected in the foreground color, type a character and select the font you’d like to use, the bolder and more graphic the better. Use the keyboard shortcut Cmd+Shift+. to quickly increase the point size.
Once you’re happy hit the move tool and then use the cursor keys to centrally position the type within the orange frame. Duplicate the text frame and repeat the process filling all the orange squares with different characters.
05. Duplicate and merge
Now duplicate one of the text frames and repeat the process in step 4 filling the white squares with orange type as shown above. Now we want to create a single layer out of the orange type and the white type.
To do this simply hold shift and select all the white type and then hit Cmd+E to merge the layers. Repeat this process for the orange type and name them something appropriate such as “white type 01” in the layers panel. This will rasterise the type and you won’t be able to edit it anyone so make sure you’re happy with it.
06. Create frames
Repeat this process until you have three sets of white type and three sets of orange type. Now we need to create two frames for the advert copy. Simply create a new layer, fill it with a color and then type your message, in this case ‘The 100 best free fonts’. Merge the color layer and type layer and then repeat the process for the final branding frame, in this case I’m simply using the Creative Bloq logo.
07. Animate the layers
Now that we have all the layers named up and neatly organised, its time to start animating them. If you’re using CS6 or above then navigate to Window>Timeline and then choose ‘Create Frame Animation’ from the drop down. If you’re pre CS6 then simply choose Animation from the Window menu.
Now turn all your layers off apart from the background, the colored blocks and the first set of orange and white type. Duplicate the frame and turn off the first set of orange and white type and turn on the second set. Repeat this process for the final set of type and create separate frames for the copy and logo layers as shown above.
08. Play with frame rate
You’ll notice that all the frames in the timeline are set to 0 sec and if you press play then they’ll cycle through at super fast speed. Now what we need to do is start playing around with the rate at which the animation cycles through each frame, bearing in mind that we’ll probably want to linger longer on the actual advertising message and branding.
This stage is very much a matter of trial and error but be careful to ensure that the final message(s) are left static long enough for the viewer to engage with the message. for the purposes of this job I’ve chosen a 0.75 second frame rate to cycle through the graphic letterforms and then 2 seconds per frame for the final messages.
09. Check the animation
To check your animation simply hit the play button in the timeline panel and ensure that ‘Forever’ is selected from the drop down if you want the animation to loop continually.
You may wish to experiment with some of the type cycling through at different frame rates or creating more sets of type so there are a greater number of character to cycle through. However, always keep in mind that the more complex the animation then the greater the file size will be. Check with your client what the maximum files size is as this can greatly affect the complexity and options you have when creating your animated banner.
10. Save as…
Finally, we need to save out the animation as a GIF. navigate to ‘Save for Web and Devices’ under the file menu and ensure that GIF is selected. Here you have a number of options but the main ones that will affect the file size are the number of colors you choose to use and the Lossy slide bar.
Play around with these settings and you’ll see an estimated file size beneath the image preview window. Bear in mind that there will be a loss of quality if you drastically reduce those two options but the flatter the colors then the better the results. For example, photographic work will noticeably suffer.
Now all that’s left to do is save out the file and drag it into your browser to test it.
Major PS Project I | ITEMS DUE THURSDAY
- Create a new PAGE on your website called PS Major Project and place each item below on the project page
- RESEARCH – 3 tags on Delicious with comments for each piece of research
- INSPIRATION – new Pinterest board titled: PS Banners – Pin 5 images with comments for each inspiration
- CONCEPT – List the nonprofit you will be designing the banners for and the “concept” behind each banner. Minimum of ONE paragraph
- LOW FIDELITY – B/W Sketches of each banner – total 6 banners
- HIGH FIDELITY – Color Sketches of each banner – total 6 banners
- PHOTOSHOP Iteration showing each banner size – simple page with just boxes/rectangles and the size of each banner listed
- PHOTOSHOP Iteration showing AT LEAST ONE COMPLETED banner