screen design: comp to code between designers and developers made easy
DESCRIPTION
My session at Adobe MAX in Oct 2014, covers new best practices enabling designers and developers to work together more efficiently. If you work on a team that brings designs to life in code, this is for you.TRANSCRIPT
© 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
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
ProductionExport Assets
Style Guides
Redlines
Specs DevelopmentDesign
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#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…
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Redline specs?
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices for Photoshop Designers
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Set Units to Pixels in Ps - Photoshop > Preferences > Units & Rulers
Best Practices - some practical tips
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Design at a higher resolution
Best Practices - some practical tips
http://sebastien-gabriel.com/designers-guide-to-dpi/home
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Don’t transform text
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Define and use styles
Best Practices - some practical tips
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Use Shape Layers when possible
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Use Smart Objects - linked or embedded
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Name your layers
Use Layer Groups
Not this.This.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Use Layer Comps - A saved state of your Layers panel
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Best Practices - some practical tips
Minimize use of Layer Styles,
Blend Modes and Adjustment
layers
Copy Layers and Flatten before
handoff
Discuss with your developer for
their preference
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#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
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Beyond Best Practices - How Adobe Can Help You
Introducing Extract Photoshop - Extract Assets
Creative Cloud - Extract for CC Assets
Dreamweaver - Extract for Dw
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Demos
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Photoshop CC
Extract Assets Easily define and package optimized assets for the web
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#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
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Dreamweaver CC
Extract for Dw Build mobile and desktop sites directly from a PSD, with
code hinting and more
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Brackets
Extract for Brackets - Coming Soon Build mobile and desktop sites directly from a PSD, with
code hinting and more
http://brackets.io
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Extract for…
Extract for Illustrator - exploration Want this? Take our quick survey
Extract for Ai prototype video
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#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
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Q&A Time
Thank you for attending our session!
@brucebowman
@winshapedia
@adobewebcc
#ccextract
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#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
© 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.
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
#AdobeMAX
Pen Tool designed by Sofía Moya from the thenounproject.com
Embed Tag designed by Hello Many from the thenounproject.com