Advanced Photoshop Techniques for UI on Vimeo

00:00

2232

See all Show me

5. Photoshop + Keyboard Macros

by Edward Sanchez

1 year ago

4. Gameboy Photoshop Time Lapse

by Edward Sanchez

1 year ago

3. Photoshop Preferences

by Edward Sanchez

1 year ago

2. Quick Photoshop Tips for UI

by Edward Sanchez

1 year ago

1. Advanced Photoshop Techniques for UI

by Edward Sanchez

1 year ago

Find me on twitter @edwardsanchez
My website edwardsanchez.me

------------------------

Content:
0:30 Shading with Clipping Masks
2:30 Shading with Marks (or vectors)
4:45 Masking a Group
6:20 Layers from Effects
8:30 Base Color Gradient
10:00 Preset Styles
11:25 Preset Patterns
12:45 Preset Shapes
14:20 Preset Panel
14:55 Stroke from Base Color
17:47 Layer Based Slices
21:35 Custom Keyboard Shortcuts
24:20 Snapping to Pixels
26:30 Dashed Borders
27:35 Layer Comps
30:40 History Snapshop on Save
32:45 Hiding Effects with Masks
35:50 Default Global Light Source

2 more tips:
• with the brush key selected, hold ctrl + alt and drag mouse up and down to control the flow and left and right to control the size.
• with brush or bucket selected hold ctrl + alt + cmd and drag the mouse and you get a color picker.

Links:
Preset Styles cl.ly/8347ee3d593be1a72924

Preset Patterns cl.ly/51f799c44c7344185999

Keyboard Shortcuts cl.ly/b2a95fde98ba6aa17f2a

Further Reading:
Group blend effects cl.ly/96aa4541b17c73635c26

Create a knockout cl.ly/54330b04d3a0ce7bd441

Credits

260 Likes

Alejandro flores
2 days ago
viitogutierrez
1 week ago
Stanley Wood
2 weeks ago
John Scalzo
2 weeks ago
Seth Shaw
3 weeks ago
nagendra
3 weeks ago
Mark Harmon
1 month ago
Aude Rrose
1 month ago
Jo Szczepanska
1 month ago
krlos
1 month ago

See all 260 likes

Tags

Nick Looijmans 1 year ago

Wow, thanks Edward! Really useful tips. Your cl.ly links don't seem to be working though :)
Edward Sanchez 1 year ago

Thank you!
Just tested them and they work. :-\
Nick Looijmans 1 year ago

Nevermind, now they're working again. Very strange.
Luca 1 year ago

That's really useful, thank you!
Justin W. Siddons 1 year ago

To set the "Stroke from Base Color" I usually just give it a stroke on the inside with the color black. Drop the opacity to a small percentage like 30% and set the blending mode to Multiply.
Edward Sanchez 1 year ago

I would expect that to work, however when I set the stroke to inside it knocks the shape off and shows the background instead. So I get this: cl.ly/b79c87cbe660c4d416d2
That's why I put a layer underneath the object, so it works as a base for the multiply effect.

What version PS are you using? CS4/5?
bady 1 year ago

thanks for sharing mate. its useful ;)
FBdesign 1 year ago

cool =)
steemorol 1 year ago

nice thanks!
John Hanusek 1 year ago

Thanks Edward. Good info!
Roger Dean Oldén 1 year ago

good tips! especially the shapelayer snapping to the grid when resizing.

one tip I have which I though was pretty basic but I have seen some experienced photoshop users no knowing it.
It is that guides can be set with percentage, if you want guides that is in the middle just type 50% when you add a new guide.

In case you didn't know it.
Jack Brannen 1 year ago

Edward, thanks for your amazing tips! Can you explain the maneuver you performed at about 17:19 to copy the color from one layer to another?
Edward Sanchez 1 year ago

You can't copy and paste layers, but you can apply colors based on foreground / background colors by selecting a shape layer then hitting alt + backspace to apply background color or command + backspace to apply foreground color.
Jack Brannen 1 year ago

Awesome! Thank you!
aRaNBel 1 year ago

Hi, first, althoug I'm a windows' user, I found this video very interesting. Second, you have showed us that there isn't a unique way to do 'actions' (if you can call that way all the things you've teached in the video) and everything is about trial and mistake until you found your own way to do your things, of course not all of us have neither the time to experiment nor a very good PC.
And I hope you don't mind me to tell you this but Goshh i fell in love with your voice..
See ya¡
Edward Sanchez 1 year ago

That's great to hear and wow - I HATE my voice so that comes as a huge surprise to me! Thanks anyway! ;-)
Million Dollar Extreme 1 year ago

photoshop tips from Perez Hilton!
Jared Booye 1 year ago

Thanks Edward great tutorial! Just wondering what pattern did you use in your Layers from Effects section at 6:30? Very cool!
Friciu Daniel 1 year ago

Thank you!
chris 1 year ago

great tutorial with really good techniques. you explained it very very well!
i am smarter now :)
Irving M 1 year ago

Just learned new skills! Thank you :)
Rocky Berlier 1 year ago

A way to clip the top layers at 3:50 is to make them a Smart Object, open it and clip the top (painted) layer to the blue shape layer (then save it). This way the clipping gets limited to the specific layers intended without having to duplicate the vector mask. Thus, future mask changes only need to happen on one layer.
Mauricio Orozco 1 year ago

Awesome tips Edward. I teach PS and didn't know folders could have masks! Now I can see how that can be very helpful.

I'm just starting to mess around with UI and website graphics so saving slices instead of creating separate documents for every UI element will keep things organized.

Also the tip about masking with an effect has been a mystery to me until know. One checkbox and I can mask objects with the effect gone. Nice!

Thanks for the tutorial.
Saravanakumar 1 year ago

Awesome tip for UI Designers. Thanks for sharing..
Ondrej Rohon 1 year ago

Thanks a lot! I learned from you a lot of things.
Wile 11 months ago

Thank you for posting this! This vid helps a lot!
Steffen Andersen 9 months ago

Great video! - You saved my life :D
skywlkr 5 months ago

Finally a tutorial about useful things, really appreciated! And one more thumbs up for the shared presets!