Introduction to Photoshop for Mobile Developers

Introduction to Photoshop for developers

Jinju Jang from Outware Mobile jinjubread@gmail.com

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!

jinjubread@gmail.com

For Questions, Suggestions

...and Melbourne Cocoahead! :)