Smooth out your design workflow with this rundown of best practices and new features geared to help you work smarter in Photoshop CC.
By
Many of us who design for apps will have Photoshop CC in our arsenal of tools, and if you're anything like me you'll constantly be on the lookout for ways to work smarter. Today, I'd like to share a few of the workflow tips and tricks I've learned over the years.
01. Design quickly with Adobe Comp CC
Adobe Comp CC can be used as a way to quickly get started on a project, whether it's for UX/UI decisions, design or something else. Once you begin a project in Adobe Comp, you can set up a grid system and start easily adding design content, from type formatting using Type kit fonts to imagery and graphics. When you're done, you can take what you design in Adobe Comp CC right into Photoshop CC and continue working on it there.
02. Set up smarter
In order to streamline your workflow, the first place you should look is your set-up. For example, it's easy to alter your workspace to show more of the tools and panels you will need. Simply choose 'Window > Workspace > Graphic and Web'. This not only adds and organizes the panels you will be using most often, but also reveals the drawing tools in the toolbar.
There are also some preferences you can take advantage of. Go to 'Photoshop CC > Preferences' or 'Edit > Preferences' , select the 'Units & Rulers' category, and set the ruler units to pixels (or whatever you need) for all new documents, no matter which profile (print, web etc.) has been used to create it. Next, go to 'Preferences > Performance > History & Cache > Web / UI Design'. Here, you can optimize history states for web and UI design, and gear cache levels towards smaller files with lots of layers.
03. Work faster with artboards
Ever since artboards were introduced in Photoshop, designing for the web or apps has got easier. Artboards allow you to design for several different device sizes and orientations in the same document, and make exporting faster. Here are a few tips:
- alt+click any 'plus' icon that appears around an artboard when the artboard is selected to duplicate it
- alt+drag the artboard to a new position to duplicate it
- Select an artboard using any method and hit ctrl+J to duplicate it
- Press alt and click an artboard in the Layers panel to fit that artboard to your screen
- To collapse all artboards at once, cmd+click on the arrow next to the artboard name in the Layers panel
- To quickly export artboards, choose 'File > Export > Quick Export as PNG'
04. Create a grid
Photo Create by "SrijonArt"
 |
| Image source: google |
05. Tackle vector drawing
When designing for the web or apps, you will need to create vector artwork. This has got easier with every new version of Photoshop. A case in point is the overhaul of the Properties panel – where we can find the most widely used features when it comes to editing vector shapes in one place.
 |
| Image Source: google |
Here are a few simple drawing and editing tips:
- To drag a shape as you are drawing, press the Spacebar, drag the shape, then release the Spacebar and continue drawing
- To draw from the center, press alt as you draw
- To constrain the proportions, press shift as you draw
- If you don't want shapes to snap to the artboard edges, you can toggle on and off Snap Bounds ('View > Snap To > Artboard Bounds')
- One final tip: Before drawing vector shapes, ensure the 'Snap Vector Tools and Transforms To Pixel Grid' option is selected ('Photoshop CC > Preferences > Tools or Edit > Preferences > Tools'). This ensures your vectors have crisp edges.
0 Comments