Michal Bluma / isotrope is proud to welcome you to...

The Chop-up Diaries

I'm Michal Bluma.

Who are YOU?

Show of hands:

Designers?

Developers?

Unicorns?

This is not a rant.

This is so that we can all
play together nicely.

We won't cover:

  • Designing inside the browser

  • Sketch

  • Advanced libraries like the Adobe Library

Warning:

I could be wrong about everything!

There are multiple ways to skin a site.

Designers design.

Developers gather
style information.

The first steps of chop-up are all about gathering information.

The easier the informaiton is to find,
the easier it is to build.

Communication is key.

Let's talk.

Colour me happy!

First things first

One of the dev's first steps is
to compile the variables

Colours, Typography, Measures,...

Marquee

(de Sade-istic tool)

Try to avoid using the Marquee tool.

"Painting" blocks with Fills is pretty quick.

... but so is using the Shape tool!   :)

Alternative:

Use the Colour Overlay
layer effect

Never use Fill for gradients.

Use a Shape or the Gradient Overlay layer style.

Ask yourself:

“What is the fastest way to get colour information into the Information panel?”

Bonus points:

  • Swatches
  • List of colour values

We're going to end up declaring them as variables:

$main-colour: rgb( 204, 0, 102 );
$link-colour: rgb( 102, 5, 51 );

What the font?

Ahh... The dreaded "Missing Fonts" window

How to play nice when it comes to fonts:

  • Make a list
  • Prepare a font-stack
  • Add the fonts to a /resources/ folder

Two quick tricks
for finding fonts:

Tip: Missing fonts

  • Open up the Character Palette and scroll to the end of the font list.
  • All the missing fonts will appear with square brackets around their names.

Tip: Gathering fonts

  • Save the file as a PDF
    (Save As... -> "Photoshop PDF").
  • Open the PDF in Acrobat.
  • Open the properties dialog
    (File -> Properties).
  • Activate the "Fonts" tab.
  • Tada! A complete list of all fonts used in the PSD.

Font layer rules

Don't use more than one font
family / style / size per text layer.

Please don't make the developer
go digging with the Type tool

If the font-family, font-weight or leading values are [unknown], we're going to have a problem.

Developers spend a lot of time in the character panel

Please help make it a pleasant stay.   :)

Repeat after me:

“There are no page dimensions.”

*This isn't print.

The web isn't a fixed size medium.

We can't know the
canvas size ahead of time.

“So which dimensions should
I use for the mockups?”

“Whichever you feel is best.”

Header headaches

Headers are awesome!

  • All of our headers
  • Need more headers?
  • Contact us about our headers



Yay! A nice header. What if the screen changes?
Should we just leave it as it is?
Go retro and fade the sides? Resize it?

This is where communication kicks in!

  • Add notes in your PSD
    ( It's with the Eye Dropper / Ruler tools )
  • Add a quick group of text layers
    for notes that can be easily hidden
  • Explain in a document that
    you send along with your PSDs

Please don't use
blending modes.

The web isn't ready for them

To clarify...

Blending modes on layers that will be exported as a single image (rectangular)...
Totes Okay!

Blending modes on reference layers for CSS
Not cool, man!

Deliverables

Package it!

Don't just send a PSD.

Prepare a package.

  • Make a folder
  • Add a _notes.txt
  • Add a /fonts/ folder
  • Add a /tiles/ folder
  • Add a /assets/ folder

I was told there
would be tips!

PSD2CSSOMGLOLBBQ!

“Photoshop, can I haz CSS?”

“Yes, you can!”

You can right-click most layers and "Copy CSS"

Result:

.Awesome_layers_are_awesome_ {
  font-size: 48px;
  font-family: "Museo";
  color: rgb(160, 151, 144);
  line-height: 1.333;
  position: absolute;
  left: 450.937px;
  top: 338.146px;
  z-index: 2;
}

...not suuuper great.
But it's a start, when you're in a bind.

Enter... CSS Hat

by madebySource

Click on any layer and get
CSS information right away!

madebySource also makes PSD Cleaner

*not a bad thing for designers to run before handing off PSDs

Illustrator also has you covered.

Does this look familiar?

Enter...

The Generator

Awesome sauce!

But wait! There's more!

This will be on the test:

  • Prepare a list of fonts
  • Prepare a list of colours
  • Don't use Blending Modes
  • Make a package
  • Communicate
  • Communicate
  • Communicate
  • Most important of all...

Link dump!!

Epilogue

Michal Bluma