introduction to photoshop for mobile developers
DESCRIPTION
** This presentation was created for Melbourne Cocoahead group, for 9th May 2013 meeting ** In this presentation, I was aimed to educate useful tips so can encourage developers to deal with photoshop. Try to explain things as easy as possible! :) Hope you guys enjoy the slides! Jinju JangTRANSCRIPT
TODAY’S AGENDA
Basic Knowledge
Common photoshop fails
FAQ from Dev team
Measure the assetSelectionExportChange image size
BASIC KNOWLEDGE
1. World of Photoshop - Getting to know the interface
Can’t live without them
<Tools> Quite Useful
2. Layers and Layer Style
Click!
Basic info of selected layer
Click!Click check box to check details
Useful info if you want to code dropshadow!
3. Additional settings
<Info>
<Layer Comps>
Check all of them!
<History> <Undo>
Cmd + Z<One step backward>
Cmd + alt + Z<keep moving backward!>
<Info Panel>
For anything mobile,Always RGB color.Always pixel units!
<Layer Comps>
Not all designer use this feature, but some of them do.
COMMONPHOTOSHOP FAILS
1. What is this?
(=Fail)
Usually comes up when you open a PSD with an old version photoshop!
2. Turn off/on the guide
Crazy guide!
2. Turn off/on the guide
Cmd + ;
This is like a toggle switch,You can on/off the guide with the same shortcut.
2. Turn off/on the guide
Even Better.
3. Stop stretching the window every single time...
Some people have a strange document screen, which changes size every time you open a new file.
3. Stop stretching the window every single time...
CS6
Consolidate All to Tabs
Let’s go to Window, Click Arrange, Choose “Consolidate all to tabs”
3. Stop stretching the window every single time...
Fixed!
This is not the end, we have final step.
After you select “Consolidate all to tabs” menu.
You need to stretch your current document, as big as you want. and then it will fix its position.
4. Where are my tabs?
Sometimes, you drag the document and it gets covered by the tool bar. It can be tricky because it has a few secret steps to fix.
4. Where are my tabs?
hit “Tab” key to hide tools
Drag down the document
hit “Tab” key again to show tools
Help me
5. I have another problem, can’t fix it
Ask for help!
FAQ
• from Outware Developers
“HOW CAN I GET THE WIDTH/HEIGHT?!”
1. “Easy but clumsy”method 2. “Tricky but quite accurate” method
1. “Easy but clumsy”method (Basic)
Draw a selection!or, hit “M”
Cmd + D to Deselect!
Check!
1. “Easy but clumsy”method (Basic)
Pros
Cons
- It’s really Easy - Good for measuring space
- Less accurate - Sometimes hard to draw selection (with all of Apple Mouses)
Ideal usage
2. “Tricky but quite accurate” method
or, hit “V”
Make sure it’s on “Layer”, Not “Group”
For people who hate this...Cmd + CLICK does the same thing!
2. “Tricky but quite accurate” method
Click!
Cmd-Clickthe thumbnail!
If you’re not sure, Cmd+T to see the selected layer, and ESC to quit.
2. “Tricky but quite accurate” method
WIN!
Bonus: Select artwork like a master
Alt (-) Drag
Cmd+select again
Selection
Shift (+) Drag
Cmd+select again
Bonus: Select artwork like a master
A: Yellow Button
B: Grey bevel
Select: B-A
1. Cmd-click B2. Cmd-alt-click A
Bonus: Shortcut Version
(Basic)
Cmd + D M Select Read info
cmd-shift-click Add more selection
cmd-alt-click Subtract more selection
(Advanced)
V Click cmd-click Read info Cmd + D
*on layer thumbnail*auto-select
“WHY I CAN’TSELECT THIS LAYER?”
1. Layer is locked2. Clipping Mask3. Smart Layer
1. Layer is locked
when you click on the artwork and nothing happened...when you see “Padlock” icon in the layer...
Click!Click!Click!
what the...
The Layer is Locked!
1. Layer is locked
Step 1: Try Alt+Click on the imageStep 2: Unlock the layer by clicking padlock toggle
ALT + CLICK CLICK!
The Layer is Unlocked!
2. Clipping Maskwhat the...Click on image
and then Cmd+Click on the
thumbnail...
Cmd+Click!
2. Clipping MaskNoooooooooo
The layer is in Clipping Mask!
2. Clipping Mask
Cmd-click!
This image is ina Clipping Mask...
2. Clipping Mask
You select the right layer!
2. Clipping Mask (Bonus!)This image is in
a Clipping Mask...and I’m a master.
Shift-click!
(fn) + Cmd + Shift + f5
2. Clipping Mask
WIN!
3. Smart Object (smart layer)
Double Click
3. Smart Object (smart layer)
Double Click
???????
This is a Smart Layer!
3. Smart Object (smart layer)
Smart Objects are magical containers. They can hold an image, a vector graphic, or a complex set of layers....
Double-click on Smart Object thumbnail
Edit the Layer in a new window!
=
“HOW CAN I SLICE
THE ASSET?”
1. Duplicate Layer2. Copy Merged
I’VE MADE SPECIAL ACTIONS FOR HAPPY DEV!
https://drive.google.com/folderview?id=0B_1EKm0Vgb7WWjB2UXU1OFUwbzA&usp=sharing
Automatically installed on your PS if you download & open the files!
Free
• Method 1. Duplicate Layer/Group
• Method 2. Copy Merged
(fn) + Cmd + Shift + f5(AKA Black magic)
(fn) + Cmd + Shift + f6(AKA Summon)
There will be link provided on melbourne Cocoahead website
How to use?
• Method 1. Duplicate Layer/Group
• Method 2. Copy Merged
You have to select the layer.
You have to draw selection
What’s the difference?
PRESERVE ALL THELAYERS/GROUPS
FLATTEN THE ASSETS
1. Duplicate Layers/groups (AKA Black magic)
I want to get this image with a
transparentbackground.
Use Duplicate Layer!
1. Duplicate Layers/groups (AKA Black magic)
(fn) + Cmd + Shift + f5
1. Duplicate Layers/groups (AKA Black magic)
WIN!
1. Duplicate Layers/groups (Bonus)
I’m not gonna look into all those
layers at once...
cause I’m the master!
1. Duplicate Layers/groups (Bonus)
(fn) + Cmd + Shift + f5
1. Duplicate Layers/groups (Bonus)
WIN!
Let’s move onto my NEW
MAGIC!
2. Copy Merged (AKA Summon)
2. Copy Merged (AKA Summon)
Oh no! Too many Layers!
I just want the WHOLEIMAGE!
Use Copy Merged!
2. Copy Merged (AKA Summon)
click!
If I make a selection fromthe Background layer...we can “copy merged”all the layers at once...
Cmd-click!
*You can also Draw selection...!
2. Copy Merged (AKA Summon)
(fn) + Cmd + Shift + f6(AKA Summon)
NEW
2. Copy Merged (AKA Summon)
WIN!
Let’s Save the asset!
SAVE!
If you want 1/2 size image, put
50 :D
alt + shift + cmd + S<File > Save for web>
Check file preset,Usually PNG-24
and transparency
“HOW CAN I CHANGE
IMAGE SIZE?”
1. Image Size2. Canvas Size
Original ImageImage Size
1. Image sizeUsing image sizeallows you to make image bigger, or smaller as much as you want.
1. Image size
Good for converting retina to non-retina!(100 -> 50 )
2. Canvas Size
Original ImageCanvas Size
Using canvas size changes whole canvas you are working on. Image will remain the same.
2. Canvas Size
I need just one pixel to the height
so it can be 62px...!
This is useful when you cut image and you need to change the size
2. Canvas Size
(61+1=62) hmm would be nice to add
that to the bottom...
So, in this case, you type ’62’ and choose an anchor point. you can see how it stretches from the anchor.
THANK YOU!
For Questions, Suggestions
...and Melbourne Cocoahead! :)