Screen Design: Comp to Code between Designers and Developers Made Easy

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Screen Design: Comp to Code between Designers and Developers Made EasyBruce Bowman | @brucebowman | Sr. Product Manager, Extract services

Winsha Chen | @winshapedia | Sr. Computer Scientist, Groovy new projects

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

#AdobeMAX

What’s This Session All About?

Best practices for Photoshop screen designers

Going from design comp to code - bringing the design to life

Demos of new products and workflows


#AdobeMAX

ProductionExport Assets

Style Guides

Redlines

Specs DevelopmentDesign


#AdobeMAX

Design

Photoshop, Illustrator, Fireworks, Sketch, or something

else?

In the browser, in a CMS like WordPress?

Just start coding?

The most common format for design comps…


#AdobeMAX

Redline specs?


#AdobeMAX

Best Practices for Photoshop Designers


#AdobeMAX

Set Units to Pixels in Ps - Photoshop > Preferences > Units & Rulers

Best Practices - some practical tips


#AdobeMAX

Design at a higher resolution


http://sebastien-gabriel.com/designers-guide-to-dpi/home



#AdobeMAX


Don’t transform text


#AdobeMAX

Define and use styles



#AdobeMAX


Use Shape Layers when possible


#AdobeMAX


Use Smart Objects - linked or embedded


#AdobeMAX


Name your layers

Use Layer Groups

Not this.This.


#AdobeMAX


Use Layer Comps - A saved state of your Layers panel


#AdobeMAX


Minimize use of Layer Styles,

Blend Modes and Adjustment

layers

Copy Layers and Flatten before

handoff

Discuss with your developer for

their preference


#AdobeMAX

Best Practices - more tips from Dan Rose

Use a Grid

Use Webfonts

Use Separate Text Boxes

Use Whole Pixel Values

Stay Non-Destructive

Store Assets Relative to the PSD

http://photoshopetiquette.com/

Photoshop tips, tricks and resources, 140 characters at a time: follow @psetiquette and @dblizzy

http://photoshopetiquette.com/


#AdobeMAX


#AdobeMAX

Beyond Best Practices - How Adobe Can Help You

Introducing Extract Photoshop - Extract Assets

Creative Cloud - Extract for CC Assets

Dreamweaver - Extract for Dw


#AdobeMAX

Demos


#AdobeMAX

Photoshop CC

Extract Assets Easily define and package optimized assets for the web


#AdobeMAX

Creative Cloud

Extract for CC Assets

Sharing, Commenting, Versioning, and Notifications

Unlock, extract, and share vital design information from

PSDs - directly in your browser

http://assets.adobe.com



#AdobeMAX

Dreamweaver CC

Extract for Dw Build mobile and desktop sites directly from a PSD, with

code hinting and more


#AdobeMAX

Brackets

Extract for Brackets - Coming Soon Build mobile and desktop sites directly from a PSD, with

code hinting and more

http://brackets.io

http://brackets.io


#AdobeMAX

Extract for…

Extract for Illustrator - exploration Want this? Take our quick survey

Extract for Ai prototype video

https://adobe.typeform.com/to/qiLZvx

https://www.youtube.com/watch?v=W5qEnJSSAQg


#AdobeMAX

Wrapping Up

Take care with your files

Be disciplined, and use the best practices we discussed

Designers and Developers should sit together when possible

Over-communicate using Comments, and noting changes

Use workflows that help you work smarter and more efficiently


#AdobeMAX

Q&A Time

Thank you for attending our session!

@brucebowman

@winshapedia

@adobewebcc

#ccextract

http://twitter.com/bbowman

http://twitter.com/winshapedia

http://twitter.com/adobewebcc

https://twitter.com/search?q=#ccextract&src=typd


#AdobeMAX

Links to Explore

CC Extract: http://assets.adobe.com

Photoshop Etiquette: http://photoshopetiquette.com

Designer's Guide to DPI: http://sebastien-gabriel.com/designers-guide-to-dpi/home

Generator Syntax: https://blogs.adobe.com/samartha/2013/09/a-closer-look-at-the-photoshop-

generator-syntax.html


http://photoshopetiquette.com


https://blogs.adobe.com/samartha/2013/09/a-closer-look-at-the-photoshop-generator-syntax.html

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Take the SESSION SURVEY on the MAX mobile app

28

…for your chance to WIN one of

these e-books from Adobe PressEvery survey you submit enters your

name to win the daily grand prize:

Lytro 16GB Light Field

Digital Camera.


#AdobeMAX


#AdobeMAX

Pen Tool designed by Sofía Moya from the thenounproject.com

Embed Tag designed by Hello Many from the thenounproject.com

Screen Design: Comp to Code between Designers and Developers Made Easy

Technology

Transcript of Screen Design: Comp to Code between Designers and Developers Made Easy