Photoshop Tips & Tricks

View Github Repository Open presentation in a new window

zoerooney

See all presentation from zoerooney

Photoshop Tips & Tricks

1 1

gdi-photoshop-tips-tricks

Girl Develop It Photoshop Tips & Tricks slideshow & class materials

On Github zoerooney / gdi-photoshop-tips-tricks

Photoshop Tips & Tricks

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Well, hello there!

I'm happy to have you here.

Let's take a few minutes and get to know each other.

  • Who are you?
  • What do you hope to get out of the class?
  • If you could only eat one food for the rest of your life, what would it be (ignoring concerns about nutritional balance)?

Topics for Today

  • Why Photoshop, anyway?
  • Workspaces, units and tools for web
  • Starting from "scratch"
  • Working with existing files
  • Slicing, saving and optimizing FTW!

What to expect

  • This is a survey of a very complex, multi-use program
  • I hope it'll give you a better sense of the features and applications for web, specifically
  • I don't know everything, and neither will you
  • Have fun! Bang around and mess with features! Ask questions!

Why Photoshop?

Photoshop was originally created as a photo editing program, hence the name.

It is expensive ($$$). However, it's an industry standard and is widely used, and thus hard to completely break away from.

Raster vs. Vector

Raster:

  • Dot-based
  • Dots = pixels (sometimes)
  • Cannot resize without quality loss
  • GIF, JPG, PNG
  • Photoshop

Vector:

  • Math-based (!)
  • Uses geometry to create graphics (!)
  • Infinitely resize while maintaining quality
  • SVG
  • Illustrator

Workspaces, units & tools

New Files

  • Web default is a good starting point
  • Make sure you're using pixels
  • Resolution 72 pixels/ inch is (still) great
  • RGB color
  • Background white or transparent

Preferences

Under the Photoshop menu.

  • Units & Rulers
  • Guides & Grid
  • Panels (Type, Layers, Slicing)
  • Units & Rulers
  • Guides & Grid

Workspaces

are...

Saved arrangements of:

  • tools
  • tool panels
  • keyboard shortcuts
  • menus

Roll your own!

(In the Window menu)

might include...

  • Type
  • Character panel
  • Paragraph panel
  • Layers panel
  • Slice
  • Select
  • Eyedropper

might look like...

Looking at mine as an example

Creating and working with actual FILES!

Starting from Scratch!

Practice File

Open up site-home.psd in the example files

Organization

  • Name things clearly
  • Group and group some more
  • Repeat yourself
  • Use your guides

Common Tasks

  • Editing images
  • Replacing images (clipping masks, copying styles)
  • Copying groups (button colors, grouping, order)
  • Layer styles more generally

Slicing, saving and optimizing

  • Maintaining key file information
  • Whole pixels, pls
  • Web fonts, pls
  • Separate font styles, pls
  • Layer comps and other visual tricks
  • Slicing and saving for the web
  • Optimizing images & retina considerations

Questions?

?

Feedback Me!

Please visit

http://bit.ly/gdi-photoshop

to submit your feedback about this class. It's anonymous and I really really really appreciate it.

Photoshop Tips & Tricks -- Girl Develop It --