Photoshop For UI / UX : Things you must know | HU Shahir | Skillshare

Photoshop For UI / UX : Things you must know

HU Shahir, Motion Graphic /Visual FX Artist (Polygon Motion)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (41m)
    • 1. Introduction

      0:39
    • 2. ArtBoards : Guide

      14:31
    • 3. Layer Comp

      5:53
    • 4. Type and Get Icon

      7:46
    • 5. Adobe Preview

      4:14
    • 6. Export Option

      7:39

About This Class

Nowadays you can find lots of tools for UI / UX Design , From Web Applications to Desktop Softwares but Among these Applications there is one software that when we use term of Graphic design or design some Where it will pop up to our mind YES ! Adobe Photoshop , is one of the powerful Graphic Design and Image manipulation of all time .

Every artist use Photoshop for different kinds of creative works some of them are using Photoshop for Designing Poster , magazine covers , books , or Editing images , color correction or UI / UX Design .With The latest update of Photoshop there are lots of new tools for creating UI / UX Design easily without Doing complex tasks are anything else . In this class we will cover those tools that you might need of them When you want use Photoshop specially for UI / UX Design so, if you are ready !

Lets Get started :)

Transcripts

1. Introduction : Hey, guys, A tree from Polygon Motion and welcome to this new class. In this class, we will talk about how to use Photoshopped. 40 Hawaiian UX design. What do you need to know? And Photoshopped if you want to use photo shop for you in you X So there's are lots of new tools that are added in latest version of photo shop that helps you a lot while you creating your you design. We will. Cavalry tools like at a preview, are both management layer camp, how to new export options and these other things. So if you're really let's get started. 2. ArtBoards : Guide: Okay, Welcome to our first lesson in this. Listen, we will talk about art boats and some other improvements are photoshopped That helps you for creating you. You I knew its design inside a Photoshopped CC 2017 newest and latest version off photo shop on a Mac and you can pretty much ah ran photo shop on windows and all the things are the same. There is no any differences before going in depth off our lessons. I have to say that you must have a little bit understanding of photo shop basics, for example, how to create shapes, how to manage layers out to how to do a bunch of basic things with focal shop to go alongside of me. So if you don't have just first of all, you can go for other photo shop classes or courses for basics. This is not a complete a photo shop course or class about the complete photo shop are anything else would photo shop. I just mentioned some of the ah important things and I will introduce you, um, with some of the tools that are nearly at it in photo shop on nearly integrated with photo shop for improving your experience air for improving your creativity inside a photo shop to create a very beautiful you in UX design. So let's escape talking to match on eso working and exploring new things in photo shop. Okay, And here you see that I have my new welcome screen on a photo shop CC 2017 on Also, you can pretty much go for new and in new. Now you see, some of the things are really changed. These are my recent project A recent documents These are some of templates in photoshopped that are newly added and they are very helpful. While you want to create documents for in a specific platforms, for example, you want to create things for for a printable contents or you want to create on design illustration or you want to design a website all the templates or already made out for you , and it makes our life so easier on. You don't have to go to Google and check out those size and then come back to photo shop Andan inter and these copy pacing task that are really consumer time and for example, we have different templates for print. We have. You can see that later. Legal, We all the things are set up. And if you knew these, Dad, when I ah, change the templates and what I jumped to the prince these icons are changed and you see that in him I have the image icon, but in print on in mobile application, we have different icons. Why? Because when you create and design photos, you're in a beat. Matt Moore on You don't have access to our ports and some off the victor bees. Things in photo shop is still he can use them bar in different in default more. They are pretty much set up for you to edit for edit photos and image and Photoshopped on if you If you go for print, there are it's, um, our thoughts and our port management like Arab illustrator that you can easily create victor shapes and you can easily change and manage things on our ports that are still very , very powerful things and powerful tools that designers were creating things on, designed for printable contents and printable things on what designers ah were designing website. Our mobile application using our boards is a very, very efficient way to save time on creative are very professional design for yourself or for your client. So and here you see that we access to our custom, um, size and units of measurement on Dhere you can define you wets and high. Then you can also save two pieces for you. But in this example, I want to go for I from six plus and you have a pretty much all other things you see for Microsoft surface for therefore I was a spotlight are Mike Icon and pretty much all the things you need for a different powerful and popular platforms like underweight, Microsoft and IOS. So I want to go for iPhone six blasts and just simply and simply ah, ah, um and simply I'm clicking too discreet baton and on all the things we're done for me, the our boat is pretty much decisive. The iPhone screen I from six blasts and you see that the if you noticed that we have our board on in a state off ah are normal layers. We have our boards and the cool thing about all boards data. I'm gonna take you guys in dips off our boards and how to manage them. And these kind of things that later in a minute recording in about our port is that you can have different screens and different are boars. In one document on, you don't need to create new document on copy pacing. Did the He working with these artworks are very, very simple and very efficient way to organize differently screens and different pages that you have on your you I knew Exit sign. If you're you on you any weeks designer or you're designing and prototype or market for you and what design you. You may know that in these kind of things, we encounter with different pages with different screens, and we have to work with Different Is Korean different designs in one applications, and our goals are very, very good way to use them. And here we see our our boards weaken simply just double click and create. We can create a new Orbison here, or you can click on plus bad and pant if I double clicking ham on. Also, this new or port is same in the same size with my default or because I have have select this guy from six Pleasant I didn't change that on. If I common, see that and I just select at this size and changes size to Microsoft Surface Pro, for example, are maybe mag book pro. You see that we have different things and different spotlights on also Ah, I can create new our ports for for different sizes in him and I can change the size later on in life in six plaice are apple watch at 38 millimeter. Gonna steal, change some of the ah other things in here with you can create different you can create. You can create lots of horrible in one document and that is very cool for, for example, if you create an application, you we have some longest or log in screen. We have some getting starring a screen. We have pretty much different s screen that weaken easily. Control it in one document in hand, you see that weaken, enter their fixed with and hide in here and also we can change some of the other settings for example, administered layer or adult size canvas and these kind of staff and also, um, the new icon is added for our poor that you convinced here that you can easily use it from here or you can head TV twice and also you can access. You have access to our Wharton create your our court and this are poor, is located in hand. You can change the name of it. For example, this is our last screen and this over law Guinness call, Or maybe getting a start on this one is our longing. And you can see that Aiken total down this and I can change some of the things in half for this our ports in Aiken, for example. If I create a new shipping him, imagine it's a bad in, for example, and it's it's over baton and mean. Let's change the color. Maybe this color Or maybe this color Yeah, there's very nice. And now watch this. If I move this at first, you think that it mind goes away and clipping that Ah are. But if you when you change this to this organ, if I released it Mouse baton. Now you see that this shape is located in our getting a star project. Our port and simply a contained a position on DA go back and forth to money, arbors and change the location off these shapes and that is very cool. Or I can steal Ah, put it in some way or in my workspace. And there, there, dear, not located inside of my are poor stare locating in here, and I can simply put them in different harbors that I want. And that is very cool. So we have talked a to match about our doors. And so now let's talk about a guide and an alignment that is very, very important if you're you, any new X designer. And if you want to design you a new X alignment and great is very, very important to concentrate while you creating your design on infomercials. We have different types of guide and way have different types of tools that help has to align our objects. And with these tools, we can create a pixel, perfect shapes and pixel perfect design very, very powerful. And that or ah, that that would be a professional design. So if I go to view on the in here Ah, I can liken click on rulers and you see that I have my rule. Riken simply just seem units of measurement body. You can change the units of measurement on also the sum of other prompters in guide that we will talk about it later on. So now we have a ah rule and weaken simply if I if I old it Ah, right click a mouse pattern and dragon here. You see that I have created a very nice, um, guide layer on the these guidelines. Naturally, these are guidelines not guide lier on. If I just simply hold on this and put in here, you can simply create these guidelines that are helping me to align my shape into this converse and introduce a screen on simply If I just slick this on just dragged way more, it will disappear on bleed it like this. And that is very cool on the other types of guy is if I go to view on, go to show there are pretty much ah, new, um tools and new things that I can you see that I have a smart guy. Smart guide is that when I changed this position of this shape you see that these ah, Papa fix our appearing on my screen that helping me too, allying my shape into different areas and into different position of this page. That is very cool. You can You can just control the visibility off the small guide in him. And we have our traditional great like this that if I use woman and you see that I can simply drag it like this and you see that Ah, when I drag this their snap to these lines that if every one of thes ah, great our measures in San Demeter or different kinds of units of measurement that I can simply change in half I go to preference and it's simply click on guide in great slices. In here, you see that every great line, every great line is to sign a mirror and I can change it with different units of measurement, like pixels or inches. And because in pretty much all day, these, um, measurement units and I can subdivide thes things thes lines for exemplified but this eight . You see that these we have more on the lines and also that is very cool, as I think you can change the color of them and ah, any other things. If I put this, for example without great dear, not to to snapping and your knowledge So perfect battle with the grade. I can simply snap it to these lines, for example, that are very nice. And I can simply ah see my SPS And also I can manage him like this. And that is nice about it is really great things and use even in here. I don't have any, um, good alignment to these areas of my earlier, but we agreed I can just notice that problem on Just align it to the surface. And if I go to view and just change guide visibility Now, you see that I have a very nice, um, perfect aligned a sheep in hand. And you can you can use grade in almost every every kind of cases and every situations when you deal with some problems on your design. And that is very cool thing about great and also our ports in the Knicks. Listen, we will talk about other tools A that you have to know as are you into exile in photo shop 3. Layer Comp: okay in this. Listen, I want to talk about a very nice neat features in photo shop that called Lay a Comp. It's located in window, and if I go to window and click on layer calm, it's a pew in here. And what layer camp is Leo camp is later comp allows has to create different STD, offer shapes, and we weaken just back and forth to do she estates, and we can see how our shape look in different situations with different values. For example, if I have a battle discreet about in here, for example, maybe just created fixed on just type maybe music on and let me change the size of it and also Cheney to fall in that it's not good as I think it really to cut in the medium. Or maybe what you a regular, for example, we have this baton thank you on in Italy, or if I just, ah, slicked these shapes on just common G been to create a group on, for example, I put the name off them normal, and I want to create different estate for disparity. How can I I in how can I see different estate of this example when a user put the character to the ah, this, um, battle in what kind of a state they have to see and what kind of interaction Or one kind of reaction. If you have to see from this pattern, for example, we want to change it. A posse of this battle when they over in the mouths when they over the mouse to this battle simply Aiken control Ah G this J Sorry, Control Chief J for duplicate on. I simply call this dead. They're over. So you have to like, over and now a simply if I go to the shape and changed opacity may be changed The brightness of cholera Zika tries this kind of things. Or me, me just changing color or two. Another called Imagine this. So we have two groups with different state. How can we see the reaction? How can we see this kind of things? Would just collecting on one baron and CDO the result of thes works? We can do it, for example, with with, I would just on and off thes visibility, but it is a little bit time consuming when you have a lot of bad in here. We have one battle it doesn't have. It doesn't seems to create a too much of. But there are times that you, um, deal with the loss of camp. A complex project leader. Calm. That's all the things for you. And you have to, um, introduce these groups to layer comment. Then you can play with ah. Then you can go back and forward to these estates. Now, if I put the normal above of this ho over group on simply, I just invisible this on by selecting the normal. Ah, simply go to this creating new liar. Calm on. I simply ride the name of it. Type the name of it, for example, the normal and also you can you see different our options for example, visibility, position and appearance layer style we want in cow. We want to go for visibility because we want to change the visibility, offer groups in here and see what they look like. A battle weaken go for position. And also we can go for appearance layer style, for example. Maybe we have in our shadow or we have different other layer size and we want to check ah them between different states and different groups. So for I'm going toe, I'm going for visibility. Just click. OK, so this over first estate. Now I just put the this group toe visible on Check off the visibility off the second layer . The second group. Sorry on. By selecting this creating in the Yulia and type Teoh over mode, you're gonna also right commenting here. Now, watch this without going to back and for with these or we're going to without clicking on these things, I can simply just collect to this pattern and see you see different estate like this. If I have hundreds of Leah, I can simply control him in here. And you see how beautiful it is, how powerful it is. If I go to file, I can simply export. My layer comes to file as well. These layer comes to file on Aiken, taken export from them, and that is very cool. So that's from Leah. Come in the next. Listen, we will talk about a very nice on Amazing. Our tool that helps you a lot of while you creating your you. I design 4. Type and Get Icon : okay in this. Listen, I want to talk about a very nice and easy way to create icon and use icon that you want traditionally and in simple way. Most of the graphic designers they use icons from our libraries you can use. You can create and design your own stuff Icon library. But it takes a lot of times and Badgett bad. In most cases, you confined pretty much all the icons that you need from the Internet, from the engine it from different warp side and from different services. And you can simply just go to Google, for example, type your icons and most of them are in this wiki former that it's, ah, form of scalable victory graphic that has much as you just, ah, scale it up or a scaled down it won't you lose its quality. And that is very cool about icon on. Uh, now I want into ds you with some new tools that helps you to create icon and use icon in your photo shop document and our ports without copy feasting went out in pouring and saving these kind of oldest half. So this new tools are help you to create icons very easily. For example, you can imagine when you tried the music or when you try a name or ah treat or four types of character. You get that icon right on your our pores on. You couldn't simply you scale it down the skillet out on a without worrying about pixel are fiction or any other staff. This these are some of the services that I want to talk about. The 1st 1 is Icon Moan I commune on. The other one is the linear icon. These are some of the cloud based services that allows you to use their pre build icon. You can simply use thes icons, or you can download default are you can download their optimize font Ah, for example, from linear icon and install it on your PC or Mac. And then we just go to photo shop and type of a keyword on according to coach. Eat that, according to court, she that you will get from Linear Icon are the services. You can just type whatever I can you want into type tool, and then you will get that I can't ride into your art board and let's watch this for example, if I go to a linear icon on, there are different meted and different plans that you can ah, go for it. But I want to go for a free version to test him, and you see that we have some I compact. Cheech, eat that. These are the key words. For example, if you want to, um, put if you want to create or if you want to, um, use their clout icon, you can simply type cloud or, if you want to ah, use some phone handset or answered you can simply type phone are absent. Imagine how cool is that. You can simply go to disturb package and you can download the phone. So recon use some pdf's or SPG. All the package is contained. SPG pdf on weapon Daddy can use alongside of them. So I just told this on if you just double click to zip file Ah, you see that leaner icon is available in here and you gave the disk cell phone that is ah, available in T t f. Form it like a normal phone on. You can just publicly console that you can go for pdf All the icons and also, you can go for its VG or via phone that I want to go. I don't want to talk about I just want to talk about this DiStefano I already installed at . And if I go to food Bischoff. Now, watch this. If I, for example, changed this music to maybe cloud Okay, Now, nothing happened because we have to change the typeface off this text to their linear icon free phone that we have been installed. And now watch this. We gave that icon on board. That is very cool. Even simply, just skillet up. You see data and you scale it down. Are Let's go for our icon. Maybe. Sorry, maybe maybe if you need Foon, you get that phone. Or maybe we go to Hans. It hunt their hands, it and phone answered. Now you get that on, for example, maybe go for call are maybe go for let's go to cheat, cheat on. And here, for example. We want to add the dinner if I go to photo shop and type and type dinner and changed this back to Lincoln free. And if I tied dinner, you see that it can simply change the color of it very easily like a normal type, and that is very nice. Aiken. Skillet up. I couldn't copy, eat diplo, keyed or create. Maybe let's go to coach sheet Cheap on I can use. For example, let's go for heart to heart. You get that hard icon on. That is very cool. You can go for a different out package. It's the free package and contain just 170 icons. You can go for a premium version. It costs two has a thing. It's cost $59. Andi, you gate! You'll gate at 1001 which were our line icons on. There are some advantaged advantages and new things and new things with this package, and also you can go for icon, icon moon. It is, ah, other surfaces. It's a little bit powerful. If I go to I co moan dark, the website it settles. You see that we have pixel perfect icon solution. You gate Ah, 2000 victor icons. You can browse free with your icons. For your top aides, you have I come a moon up If I open it, the new top and ah, the cool thing is that most of the big tech companies like it was a Microsoft are using these kind of small as services Ah, applications and these surfaces to create and use these icons like this. And that is very cool. You can just like this on create origin rate SVG and more on you can type the name of it. You can you can get the coat of it on pretty much all the things and imagine on it will, ah, fight time consuming. And that is very cool. You can simply download it and use it on your project. 5. Adobe Preview : So now let's talk about other tools that are newly added to photo shop on. You can use them while you create your you I design on. The other thing is that immigration off libraries that on adding more tools for you to Cali buried with your out of libraries And you can pretty much go for adult color, for example, on you can create your color palette and you can create your color combination on. Then you could just save that from at a collar and you can import. And you can you have access to those color palette it you've created in here on ultra. You can search on Adam Vista, for example. If I said for Mac, it will. Ah, show me some of them Mac Photo and M Mac M. It's, ah that Aiken simply, for example, if I go for this, it can simply drag him here and click. OK, you see that I get that, but it's ah ah bad the adult. Let's talk water markets and dear, because we just used them free. But we can, um, down with that and also purse that with some license to a library, and that is very cool, and you can go for every other things and you could create your new libraries are the libraries of Amy's libraries off color policy in these staff so that his firm, Creative Cloud Library on the other thing is, and also the other tool is called at a preview at a preview lets you to test your design on the ah iPhone itself on your iPhone, for example, we contest is designed how it look to the on an actual device like iPhone on. We can do it with adult preview very easily. And if I go to here on you, see that we have our device preview. We don't have any connected device in here, and it's written in here to preview Designed Are each on your IOS device lunch out of previous E seem while application. So, first of all, you have to download, um, at a preview CC from Apple store on your iPhone, and then you can clinked with WiFi or use B, for example. Imagine I just connect my iPhone with my Mac. Have ya used beef on? So I have connected my iPhone Ah, via use be to my Mac and now if I go to Ah at a preview in here at a preview that I've already downloaded from the APP store. Now you see that my images load it. And if I go to Arup device preview, you would see my iPhone is listed. Aim here. You see that my iPhone is connected and I can check for new device or I can go for on You have things. I'm just testing those ah designs on my iPhone and I see some some. For example. Now I see some color calibration and mistakes that I have made it and I have to just bride ah, give the colors electric eligible brides. And that is very cool. You can go for for other arbor, for example, If I create other our ports, maybe another are born hand clicking here on I create another are bored and simply if I swipe you see that I see my other our bows and my can create, for example for examples. Imagine this And if I going here you see that and that is very, very nice And the cool feature that are nearly attitude. Ah photoshopped CC 2017 6. Export Option: booking this. Listen, let's talk about some our tools. First of all you might be or the name off CSS cascading style sheep. It is a kind of scripting language. Or are we can also see It's a market language that are that is integrated in hte email. To give the Web elements or 80 middle tax Estyle on, give them, give them a style, just very simple. For example, in each meal we have a webpage, or IT issue is a kind of a structure for a website on which ceases weaken painting the walls, for example, we can create some shadows and styles and these other stuff why I am talking about see Assis, because in you I and UX design, you have to know Allah. Tidbit about ceases because when you design your things and when you from design your screens and you want to deliver that to a whip devil intuitive lapper did a flopper. Ah, himself or herself. You see A says on needs. Here's a score or SVG court. Just make some arrangement and some changes at you. You were elements on If you deliver its vehicle, sees the score with your file and you will give this ability to developer to change some off the ah basic parameters on basic ah style off your design for example, changing the colors. And if you want to change the color if you want to change the color, it doesn't need to call you and give you the master changing color and in export No, no, If you give them this SVG core and if you give them a CSS score taken simply, just type the court of the color to your element on on the element. Color will be changed. Well changed, Andi. In photo shop, it is very useful to know how to extract your element is called an asymmetrical, for example is very simple. If I want to extract the seasons called for this group, I could simply just right flicking here on and here You see that we have copy. CSS is and we have copy SVG, for example, if I copy seizes and go to my text editor are on windows, you can go for a note pad And now if I paste this you see 1/2 these courts without just ah typing annual lines. Of course I can simply have these codes and I can change some off the things in here alongside of my, um, documents that we will talk about it, how to export your documents in a way that you can change him. Ah, the Parliament was using seizes gold. And you see that what color we have to color value. We have some other things and it Z pieces style code. For example, dar your your element Name your layer name in here on the's, order some parameters and alter some codes that they're related ah to to your layer on that is very cool. You can also just copy the SVG code. For example, If I copy this copyists Fiji, I go to it sticks in it and paste that you see that it's a it's physical off your element on simply you can copy this and gave to develop Iran. They can use this kind of things very easily So that is from ceases on, also from SVG. Don't forget to put this ability to developer to give them the ceases and it's video cord alongside of your you I and he works designed so that's from svg and ceases. And now let's talk about a Some explore options and export. We have different options at the 1st 1 Is the quake exporters PNG that export all of your file that you have Ah, in your document to a PNG file and you can go for export as if I goof and export ass. You can simply see your ah groups and you can put the sum suffix to this tea the width and height. If you're kind of size, you can change, mate Editor automata data off um, your file and also contained a farmer that even export all of them to S V G R P and G. So it is from explore ass. And what if you want to export all of your art board Ah, layers to a separated file and in here you can go for export preference. You can go for export on. You can export your layers to file. And if I click on hand and now you can browse a destination for this, Maybe I just good off in this cop on create any folder, maybe export exported. Lee s on. Just click open and you can give them a prefix and suffix, for example, bt n or maybe ah one design. It's our Suffolk's, and it can change. Ah, slick. Your file type, for example. Maybe go for PNG to the 24 Beth, and it can change the transparency injuries in term liars that we want them to be. Trust in transparent mode on. You can go for a visible layers on Lee, or you can go for all layers. Just ran this and now you will get wait until definition off the process. Now, if I go to the explore, Leah, you see all all of these layers. And also, if you want to export these layers that you haven't here with the exact see same size of them into separated file for for delivering the delivering that into a foreign developer. You can simply slick your layers in here like this, like this. And you can just right click here on Beacon. Uh, click on quick exports has a PNG simply You have to, um, tell the simply you have to tell, um, photo shop where you want to export them on. Now just click open. And if I go to export, you see that? Ah, half them in two separated file that I can ah create my application using HT male or ah, the website using html NCS isn't used him. That is very cool features that on older version of photo shop we can do it with some parties crisper But now they are integrated into photo shop itself. So that is pretty much all the things that we have covered about photo shop for you, a new X. It is a lot of other things that we didn't cover in this class and you have to find them in ah different out of tutorials and different sources. Don't forget to check out other polygon motion classes on a scale share, mining visit to share and we will see next time.