Classes are running in-person (socially distanced) and live online. Secure your seat today

Photoshop CC 2018 for Web Design & UI Book

Step-by-Step Training Workbook: Create & Optimize Graphics for Websites & UI (User Interface)

Learn how to use Photoshop to create and optimize graphics for web and user interface design, without wasting time on functionality that focuses on photo retouching or print design. You'll learn modern techniques, including new features added to Photoshop CC. Learn to turn wireframes into finished designs. Understand how to design responsive website layouts that are optimized for mobile, tablet, and desktop screens. You’ll design on grids, extract image assets, create hi-res 2x graphics, and so much more. This is the ultimate Photoshop for web/UI workbook. In addition to learning key features and techniques, we’ll cover important workflow tips and tricks. Learn to efficiently create professional designs that are easier for developers to code!

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-51-8

Setup & Introduction
Downloading the Class Files
The Focus of This Book
Section 1
Setting Up: Do This Before Other Exercises!
  • Setting up your class files
Creating New Files & Designing on a Grid System
  • Setting preferences & workspace
  • Creating a new document
  • Creating a grid
  • Designing with Bootstrap’s grid
  • Creating colored backgrounds for text
  • Importing & styling text
  • Viewing at accurate size
Adjusting the Layout for Tablets & Mobile Phones
  • Comparing Bootstrap’s desktop, tablet, & mobile grids
  • Adapting the design for tablets
  • Adapting the design for mobile phones
Adding Photos & Editing the Layout
  • Importing photos
  • Resizing photos
  • Grouping layers
Section 2
Adding Page Navigation & Editing Smart Objects
  • Creating a navbar
  • Adding a stroke
  • Changing opacity
  • Importing vector graphics from Adobe Illustrator
  • Editing a vector-based smart object in Illustrator
  • Editing a pixel-based smart object in Photoshop
  • Content-aware fill
  • Swapping out graphics
Text Styling & Adjusting Images Behind Text
  • Adding a drop shadow to type
  • Darkening a background photo to make text more legible
Exporting Assets: JPEGs & HiDPI/Retina Graphics
  • Using Save for Web
  • Optimizing photos for low-res screens
  • Optimizing photos for hi-res (HiDPI/Retina) screens
  • Compression settings for 1x & 2x versions
  • Saving file size when optimizing 2x graphics
Exporting Assets: SVG (Scalable Vector Graphics)
  • Exporting SVG from Photoshop
  • Exporting SVG from Illustrator
Section 3
Exporting Assets: PNG & GIF
  • Transparent photos
  • 8-bit graphic formats: GIF versus PNG-8
  • PNG transparency
  • Properly optimizing colors: limited colors versus gradients
  • Exporting 1x & 2x graphics
Exporting Assets from a 1x Design
  • Using Adobe Generator to export optimized images
  • Creating PNG, GIF, & JPEG files from a design
  • Exporting PNG-8 with partial transparency
  • The proper way to export 1x & 2x graphics
  • Why Photoshop sometimes exports low-res JPEGs & how to fix it
Designing in 2x Photoshop Files
  • Designing at 2x versus 1x
  • Turning a wireframe into a real design
  • Setting anti-aliasing & hyphenation
  • Aligning to a selection
  • Using clipping masks to crop an image
Section 4
Paragraph Styles
  • Creating, applying, & editing paragraph styles
Masking Photos & Visual Effects
  • Importing & cropping photos (masking)
  • Colorizing icons (vector smart objects) in Photoshop
  • Adding effects such as stroke, inner shadow, & gradient overlay
  • Copying effects to other layers
  • Fill opacity
Exporting Assets from a 2x Design
  • How exporting assets in a 2x file differs from a 1x file
  • Slicing
  • Layer based slices
  • Custom sized slices
Bonus Material
Patterns & Textures
  • Creating & using patterns
  • Colorizing patterns
Mocking Up Interaction States (Pop-Up, Hover, Etc.)
  • Creating a video overlay
  • Creating & viewing layer comps
  • Making changes across layer comps
Batch Processing Multiple Images
  • Using Image Processor
  • Custom cropping & exporting layers to files
  • Batch renaming files in Adobe Bridge
Wireframing: Part 1
  • Adding placeholder text & buttons
  • Indicating where a graphic should go
Wireframing: Part 2 (Aligning & Distributing Elements)
  • Duplicating, aligning, & evenly distributing elements
Reference Material
Adobe Preview CC: Viewing Work on iOS Devices (Mac/PC)
  • Using Adobe Preview CC to view Photoshop files on a phone or tablet while you work on a Mac or PC
Skala Preview: Viewing Work on iOS/Android (Mac Only)
  • Using Skala Preview to view Photoshop files on a phone or tablet while you work on a Mac
Additional Image Optimization Tools
  • Further reducing the file size of PNG, GIF, & JPEG
Web File Formats Quick Reference
  • Comparison of JPEG, PNG, GIF, & SVG
Common Device Sizes
  • 1x, 2x, & Bootstrap container sizes for iPhone, iPad, & desktop
Guidelines for Designing in 1x & 2x Files

How our eBooks Work Buying eBooks for Someone Else

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s Books app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • Books (EPUB)
Windows PC
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.

demonstration of different book formats: print, kindle, & mobile devices
Yelp Facebook LinkedIn YouTube Twitter Instagram