How to Use Artboards in Photoshop (UX / UI / Web Design in Photoshop)

[@cyborgant825]

This tutorial has got to be one of the best on the internet!! Aaron, you are a fantastic teacher!!!

[@didriketholm6852]

Aaron, you sir, are my hero. You and your team create the best online educational videos I've ever had seen.

[@saba_me]

best video about photoshop artboard tool

[@andremarcelino6809]

Keep the great work

[@josephryan090]

Great tutorial!

[@problitz]

Thanks for this awesome video. There was No "Blah Blah Blah". Wholesome informative video. You made my day....Thanks a lot...Cheers

[@MrRuslanbykov]

Thank you Aaron! This channel is the best, as always.

[@IBex__]

Highest Quality tutorials. Thanks Aaron for all your time you spend for us.

[@akashadearg-due1435]

Fantastic master aaron

[@akashadearg-due1435]

+MrZaZa3k12 yes the doors cool lml

[@JustAPakistaniGamer]

just what i needed !! Aaron, You the man !!

[@lauramihaela5438]

You saved me ! I`ve been looking for this on google for ages :))) . Thank you !

[@IslanderJena]

Phlearn...you're the best!!! Keep it up!

[@saketprakash6616]

Really Helpful...Thanks a ton....to the point information in a cool way...

[@MrAnthonydawson]

Good episode. A couple of ideas for new episodes I'd also like to see are: 1. Layer Comps These have been around a long time in Photoshop but are often under used. 2. Displacement maps. I'd like to see how they can be used to create a bokeh effect on portrait backgrounds without effecting the subject. Also one showing displacement maps used to automatically distorting objects/patterns.

[@adrianaaguiar4123]

Thank you!

[@giorgiogorgeous5570]

Thx! great tutorials as always.

[@Charlotte-dq1nn]

Thanks Aron, great intro to artboards! (Glad you got the ponytail cut off...)

[@irenaCD]

Thanks! : )

[@Chadthaniel]

Solid class my dude. Thanks for the tips.

[@DC9848]

Quality tutorials as always, thank you PHlearn

[@ipungsasmita6134]

Terimakasih Pak Dosen

[@moosi760]

Thanx Aaron :Dthis is really good

[@yordandimov6990]

Good work!

[@aureliolorenzo9320]

Good tutorial, very useful!

[@Kyber3000-Kimberly]

Wow this is very helpful. I learned quite a bit from this. I started making gaming related infographics as a hobby and with no graphic design or photoshop experience so I have A LOT to learn. artboards was unknown to me until the other day when I was messing around in photoshop so I’m pretty happy to learn about this feature. At the end of the day I feel there will always be more to learn with photoshop but maybe that’s just me and my inexperience, either way I enjoy learning more and hope to improve. :) thanks for this awesome video. And btw I love how the website looks even if you didn’t go with that, the colors are very pleasing to my eyes.

[@sonugraphics1670]

Thanks! great tutorial. it helps me a lot to understand artboard.

[@JobishJosee]

Awesome Tutorial...

[@xaap8408]

wicked one , very informative ty.

[@montgal53]

Excellent tutorial. Please do a tutorial on exporting (preparation) the completed Artboards (all) to be uploaded to a web host. Much appreciated.

[@thedanieljohnson]

#phlearnin' in the new year...

[@shellz-art]

Brilliant. Thank you!

[@fiveshorts]

PLEEEEASE tell us how you create such an exquisite video setup... Camera/lens/lighting/set/sound... SO good

[@Dana.1zura]

Phlearn Teacher thank you realy nice tutorial please more web design tutorial like ^_^

[@zactownsend1099]

Do realistic shadows and reflections!!

[@christopherstark6773]

That was a bit more intense. Just got the CC version of Photoshop when I updated my computer, so there are a bunch of features in there that I haven't learned yet. Art boards would be one of those features. Not sure if it would be something I would use frequently, but might be good to know for future reference.

[@emrahy.849]

nice work

[@park9828]

very Thanks

[@AwaisHunjrapk]

superb

[@haroonaaron5177]

Aaron sir you are the great Love uhh

[@HRStudiosTheDungeon]

This is great but you definitely want to use illustrator for that vector based content. Those elements tend to work better when moving them across the platform. Especially if it is going on the web.

[@doomster2914]

Very helpful! Thank you Aaron. Artboards in PS are pesky

[@Shiryu182]

we need a video about timeline and how does it work, i always wanted to do like a video glitch thing with my photos but i think its kind of complicated

[@FrancisArven]

thanks Chris Pontius

[@frankiesomeone]

i kept picturing the Swedish Chef everytime he said artboard

[@dennisjohansen8490]

Incredible! You're a bloody legend.

[@silverblue233131]

Hey, kind of an off topic question. I do real estate/architecture photography and I use flash. It isn't often noticeable, but some paint colors show fan shadows on the walls much more than others. What is the easiest way to get rid of these in photoshop? I can send you a few images for you to maybe make a video out of?

[@rafabogdan6904]

I like the idea of artboards, but you shouldn't put fonts inside a smart object, because after resizing you will gain a font size like 14,34px (tested). Trick with Smart Objects is good for photos and elements that doesn't contains fonts inside. You should also try to use Paragraph Style and Character Style from Type panel- very usefull for web design ;)

[@rafabogdan6904]

And icons shouldn't be resized- better export them as .svg ;)

[@photoshopjoker9229]

haha it looks like you are the navigator by where your widow is :)

[@IvoCiuffa]

Great video but 4k resolution or at least 2k would be great!

[@vanessap4444]

What camera do you use for filming? The quality is insane

[@prawiroharjo6363]

the master

[@ahmadahouei6464]

Hi Thanks for tutorials but this video could not answer to my question ! I want design instagram uniform with artbord (9 Post). Is it possible or not? My design is trail but shapes or texts just can be shown in 1 artbord!

[@MK-nw6vh]

Hello Phlearn team! :) I'm kinda new into Photoshop and I was wondering how to make templates from the Internet fit into my picture. When I put any objects in my photos they look super fake and even when I change the brightness and the contrast it doesn't look good. Thanks in advance!

[@Ayhamsouri]

hello Aaron, could you please make a tutorial about fixing double chin. Thanks.

[@khall187]

Not to be mean but there's literally 100 videos on KZbin about this

[@Ayhamsouri]

they are not pro tutorials, thou I asked Aaron to do it.

[@charliebonney3731]

I'm sure a little clone stamping and Liquefying would do the trick.

[@graphicsens5435]

NicE :)

[@thiagopsampaio]

Photoshop CC ONLY, I'm guessing..

[@MaxHecks]

yes, but for me more a Adobe Illustrator function

[@Exevium]

Apparently also only for Apple products.

[@MaxHecks]

No Affinitiy Designer (About 50 €) has Artboards to. ;)

[@artisticmystic7164]

2018 and this video is old techniques

[@Daiv1341]

TIP: To migrate an external PS file into an artboard: put ll the elements into a single folder in the external PS file, select the folder from the layers panel, drag the layer/folder to the tab where the artboard resides (don't let go yet!)...then bring the dragged contents over the preferred artboard and let go. RESULT: all the contents - as a set - will drop in place; all you need to do is nudge the layer into position. Use your crop tool to resize the artboard to the size you need. This way there's no need to convert to smart objects or re-position all the elements.

[@Haipoxx]

Hi ! First thanks for the video... i have a problem, when i resize my second artboard from mac 27 to macb. 15, it comes bigger than the first, when it should be smaller. I really dont know what i am doing wrong D; some ideas?

[@ethanpenn5]

Every time that I try to create an artboard, it measures the width and height in percents, and says "invalid numeric entry" a bunch. I have to keep clicking OK a ton of times. Also, this is a very weird way to use artboards. Why not use InDesign, XD, or any of those other softwares to design websites? Just curious.

[@p1walls]

I thought this tutorial was going to show you how to export a working Responsive layout from Photoshop not a flattened image of what a layout looks like on different devices. I did that with the earlier versions of photoshop without "Artboards". Is there anything like "Adobe Reflow" that allows you to create working Responsive layouts in photoshop and expert responsive html and Css files? Thats what I need.

[@p1walls]

I would then use Dreamweaver to tweak the css or code and get the interactivity right.

[@Daiv1341]

For Responsive design...use Adobe Muse. No coding and you can set up all the breakpoints in one file for all formats/devices...from smartphone to tablets to desktop.

using artboard is actually good for multi-page web design? my system have only 8gig of ram, so having many artboards in a single psd will be such a painfull to be working with...

[@naasikhendricks1501]

Exports as CSS???

[@daoquang900]

Phlearn stops replying now since they got bigger. This is so sad! just wonder how is everyone, Aaron definitely still looks fine, how about the others? And when will we see the new office tour? it's been years since they moved!!

[@daoquang900]

oh god you reply! thanks Aaron! Best wishes for all of you!

[@swaminathan1390]

what is an artboard?

[@helmet212]

Unable to generate image assets using artboards. Somebody help?

[@zarfeenhameed2664]

Is this not possible in Photoshop CS6?

[@ajrproductionsni]

what type of photoshop do you use and wheres the best place to buy it?

[@FredHuider]

Photoshop cc 2015. You can get it here www.adobe.com/creativecloud.html

[@ajrproductionsni]

+Fred Huider ok thanks

[@andemaiar]

I love Aaron's tutorials, but he needs a new phrase instead of "There we go!"

[@RieLearn]

how to add text (numbers) automatically on each artboard

[@SergiuSalcau00]

how do i create column in an artboard. just a white rectangular with writing in it. anyone ??

[@ArnoldVeeman]

I really miss Flash and the good old days where we could create really artistic and personal website the way we wanted it and not the generic flat websites like we see all the time today. Sure, I understand that this is the best option for programmers and code geeks, but I want something more creative, not only beefed up with images but an artwork by itself... yeah, I know, I am getting old ;-)

[@Helios476]

Its not nearly as cut and dry as you may think. The flat aesthetic has its philosophy grounded in making sure the web pages are as consistent and easy loaded onto multiple devices. Some designers even take the philosophy of responsivity all the way to figuring out how best to serve their web content to places with subpar internet speeds and keeping the experience for every user as consistent as possible. By loading a page with a single, static background that only works in a single format because it has ornate flash graphics would be antithetical to the point of responsive design. If you think about the web as a medium, instead of as a viewport, you could see that the design that many "programmers and code geeks" create is an art in and of itself.

[@RomboutVersluijs]

GO check some great CSS and animated html sites. With HTML5 its kind alike flash started from scratch again. We see the same things happening but now with HTML site. There are really nice ones out there

[@MoreMishelle]

he talks so well that the auto-generated subs are accurate

[@eudaser1]

Why Photoshop? Doing this work in Illustrator so easy. ps: sorry my english

[@party88list]

There is a thing called sketch now...

[@naasikhendricks1501]

#aknacer

[@slicedbread622]

UX designers almost never/always never use Photoshop if we're laying out type because Photoshop is so poorly adapted for typography, artboards or not. It looks like Phlearn is a bit out-of-scope here.

[@slicedbread622]

I use Illustrator mostly because I can drop the files into After Effects and Photoshop when I do need to edit pixel-based images, or when I'm doing motion graphics. It's nice because the entire Adobe Suite is so well integrated. But every team has different needs. Sketch is amazing as well, and very in vogue at the moment. As a side note - while you've upped the professionalism of your brand/business I miss the old goofy/silly/more-yourself Aaron Nace, circa 2014. Consider that your brand is partly your great personality and commentary, and not just your content. You have a gift for educating, and when you let your humor and "unedited" style take over is when you really shine. Nevertheless, great work and thanks.

[@RomboutVersluijs]

hahaha never / always.... what is it???

[@IIIlllBravo]

Jeremey Bot What would the ideal application to use?

[@srdjanstanojcic8608]

ADOBE MUSE is much better and easier for web

[@BaghaShams]

I'm so confused. Why are you designing webpages in photoshop?

[@BaghaShams]

***** So it's just for mockups...

[@daniel33498]

+Bagha Shams actually there is a way use Photoshop to design web pages. I really don't know how to explain it much because I don't know about the process but essentially it uses Photoshop and normal HTML/CSS programming to create the webpage. You can look up "how to create a webpage with Photoshop"

[@naniah3784]

+Daniel Dukhedin ikr

[@MrAnthonydawson]

A lot of digital stuff like websites and emails begin their life with photoshop as you able to slice up the elements and save them as html 5 code direct from photoshop. It will often depend on how your digital team prefer to build/code their jobs. A lot will ask you to provide artwork as a layered psd file such as done in this episode. It's mainly designers (and NOT coders) that prefer to work in applications such as Illustrator and Indesign as they have greater control over type and typesetting.

[@mohdseraj1047]

Speaking from a web design background, you should design your web pages in photoshop first before coding them to html & css or shifting them to wordpress or any king of cms. it saves you time and you can show your client the project before coding it, so that he can make comments on it and then you can edit it easily. Then after he approve of design final draft, you can move on to coding or hand the ps file to the coder.

[@travelwithcarezilla4691]

Thanks for sharing, its a good learning.