How to Use Artboards in Photoshop (UX / UI / Web Design in Photoshop)
Вставка
- Опубліковано 21 лип 2024
- I Guarantee I Can Teach You to Master Photoshop. Learn How: phlearn.com/aaronwillteachyou
How to Use Artboards in Photoshop
Artboards are a great tool for UX / UI / Web designing across multiple devices. If you want to see what a webpage would look like on a 27" iMac, a 15" MacBook PRO and an iPhone, you can use artboards to create design previews of each! Learn how to use artboards to design quickly and efficiently in today's episode!
How to Create Artboards
Preview your design at different resolutions by going to 'File - New' and choosing Artboard from the dialogue box. Here, you can select the resolution you want to preview on (27" iMac). With the Artboard tool selected, hold 'Alt/Option' and click on an edge icon to duplicate the artboard.
Artboards are useful for allowing you to duplicate your designs across artboards as well, so you don't have to reimport your elements.
How to Use Linked Smart Objects in Artboards
Smart Objects are the best way to adjust and resize your design without losing information. Right click on a layer and go to 'Convert to a Smart Object' to make one. To place them onto your artboard, simply duplicate your design layers. If you need to resize the artboard, click and drag the edges with the Artboard tool.
After you've arranged the Smart Objects to your liking, you can repeat the process on more artboards. Duplicate the current artboard to make new ones, which you can set to be the sizes of a 15" MacBook PRO and an iPhone. The Smart Objects will make sure you re-adjust all of your elements non-destructively.
Did you know there is a lot more to PHLEARN than UA-cam? phlearn.com/more
~-~~-~~~-~~-~
~-~~-~~~-~~-~
This tutorial has got to be one of the best on the internet!! Aaron, you are a fantastic teacher!!!
Highest Quality tutorials.
Thanks Aaron for all your time you spend for us.
just what i needed !! Aaron, You the man !!
Aaron, you sir, are my hero. You and your team create the best online educational videos I've ever had seen.
Thank you Aaron! This channel is the best, as always.
Phlearn...you're the best!!! Keep it up!
Quality tutorials as always, thank you PHlearn
Solid class my dude. Thanks for the tips.
You saved me ! I`ve been looking for this on google for ages :))) . Thank you !
Thx! great tutorials as always.
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.
Thanks for this awesome video. There was No "Blah Blah Blah". Wholesome informative video. You made my day....Thanks a lot...Cheers
Thanks Aron, great intro to artboards! (Glad you got the ponytail cut off...)
Thanks! great tutorial. it helps me a lot to understand artboard.
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.
Great tutorial!
Thanx Aaron :Dthis is really good
Keep the great work
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?
Good tutorial, very useful!
Brilliant. Thank you!
wicked one , very informative ty.
Really Helpful...Thanks a ton....to the point information in a cool way...
Fantastic master aaron
+MrZaZa3k12 yes the doors cool lml
Awesome Tutorial...
Excellent tutorial. Please do a tutorial on exporting (preparation) the completed Artboards (all) to be uploaded to a web host. Much appreciated.
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.
Good work!
Thank you!
best video about photoshop artboard tool
What camera do you use for filming? The quality is insane
Aaron sir you are the great Love uhh
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?
PLEEEEASE tell us how you create such an exquisite video setup... Camera/lens/lighting/set/sound... SO good
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
Thanks! : )
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!
Phlearn Teacher thank you realy nice tutorial please more web design tutorial
like ^_^
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.
nice work
Very helpful! Thank you Aaron. Artboards in PS are pesky
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.
#phlearnin' in the new year...
how do i create column in an artboard. just a white rectangular with writing in it. anyone ??
superb
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!
Terimakasih Pak Dosen
very Thanks
what is an artboard?
Do realistic shadows and reflections!!
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...
hello Aaron, could you please make a tutorial about fixing double chin. Thanks.
Not to be mean but there's literally 100 videos on UA-cam about this
they are not pro tutorials, thou I asked Aaron to do it.
I'm sure a little clone stamping and Liquefying would do the trick.
Great video but 4k resolution or at least 2k would be great!
i kept picturing the Swedish Chef everytime he said artboard
Incredible! You're a bloody legend.
Is this not possible in Photoshop CS6?
how to add text (numbers) automatically on each artboard
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 ;)
And icons shouldn't be resized- better export them as .svg ;)
Exports as CSS???
thanks Chris Pontius
haha it looks like you are the navigator by where your widow is :)
the master
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.
I would then use Dreamweaver to tweak the css or code and get the interactivity right.
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.
what type of photoshop do you use and wheres the best place to buy it?
Photoshop cc 2015. You can get it here www.adobe.com/creativecloud.html
+Fred Huider ok thanks
Unable to generate image assets using artboards. Somebody help?
NicE :)
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.
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!!
oh god you reply! thanks Aaron! Best wishes for all of you!
Photoshop CC ONLY, I'm guessing..
yes, but for me more a Adobe Illustrator function
Apparently also only for Apple products.
No Affinitiy Designer (About 50 €) has Artboards to. ;)
2018 and this video is old techniques
he talks so well that the auto-generated subs are accurate
I love Aaron's tutorials, but he needs a new phrase instead of "There we go!"
Why Photoshop? Doing this work in Illustrator so easy.
ps: sorry my english
#aknacer
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 ;-)
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.
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
There is a thing called sketch now...
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.
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.
hahaha never / always.... what is it???
Jeremey Bot
What would the ideal application to use?
ADOBE MUSE is much better and easier for web
I'm so confused. Why are you designing webpages in photoshop?
***** So it's just for mockups...
+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"
+Daniel Dukhedin ikr
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.
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.
Thanks for sharing, its a good learning.