How to use Photoshop Artboards

Intro
In the Creative Cloud 2015 (CC 2015) release, Adobe released a new feature within its Photoshop software. This feature is called, “Artboards.” If any of you are familiar with Illustrator and its use of artboards, then this should come pretty naturally to you. Personally, I have been waiting for Adobe to give photoshop the artboards functionality ever since I started using their products. I do the majority of my work in illustrator as a graphic designer. It was a real pain to use Photoshop and have it not have a feature I had grown so use to. It threw off my whole workflow and was a pain in the butt. The process of having to flip flop between more than one document drove me bonkers.

Software
Photoshop CC 2015 or higher

Time to complete
5 minutes or less

Skill level
Beginner, intermediate, or advanced

Part 1:
Open Photoshop CC 2015. In the top menu, click “File > New” or hit command or control + N on your keyboard. Your standard documents preset box will open and under the “Document Type:” section, Click on the drop down, as shown bellow, and select “Artboard.”

Screen Shot 2015-12-13 at 2.05.48 PM

Screen Shot 2015-12-13 at 2.06.48 PM

Screen Shot 2015-12-13 at 2.07.33 PM

Screen Shot 2015-12-13 at 2.09.20 PM

After doing this, you can select the “Artboard Size” tab and select from the presets or enter manually some custom dimensions. In this instance, I chose to use the iPhone 6 preset. Once done here, click “OK.”

Screen Shot 2015-12-13 at 2.11.39 PM

Congratulations, you have now created a document that allows for artboard functionality.

Screen Shot 2015-12-13 at 2.14.31 PM

Part 2:
After your document is created, to add new artboards you can either of two methods.

Method number 1:
Click and hold down on the “Move” tool. From the drop down, select the “Artboard” tool. This can also be done by hitting shift + V.
IMG_5197.JPGScreen Shot 2015-12-13 at 2.15.12 PMIMG_5198.JPG

From here, you can click, drag, and release anywhere on the canvas and a new artboard will be drawn.

Screen Shot 2015-12-13 at 2.21.54 PM

Method number 2:
After selecting the “Artboard” tool (As we did in method number 1), in the top menu, select the “New Artboard” tool.
Screen Shot 2015-12-13 at 2.17.26 PMFullSizeRender.jpg

Click anywhere on the canvas and it will paste the preset you chose when creating the document or a duplicate of the last drawn artboard. Note: if you changed the size section, what is visible there, that is what it will paste.

Screen Shot 2015-12-13 at 2.30.38 PM

Part 3:
Get busy creating and have fun!

If you want to learn more about the new artboard feature, visit Adobe’s site.
Also, if you use Invision, both Adobe and Invision collaborated with the idea of improving one’s workflow. If you upload a document from Photoshop that includes artboards, Invision will automatically read those as individual screens. To learn more about this, check out Invision’s article on the team up.

Share your thoughts