Intro to Sketch - Beginners guide to Sketch Basics |

hey everybody I'm Jesse Showalter and in this episode we're taking a look at one of my favorite design software's of all time the thing I spend 99% of my time in that's sketch for Mac one of the best in my opinion software's for digital designers who want to do web products software design sketch for Mac is for you in this video we're gonna be doing a basic overview the interface simple commands giving your projects up and running and a few tips and tricks on how to really soup up the program this will be a great tutorial for people who have never used sketch for Mac or maybe dabbled a little bit but not fully committed to transitioning over to using it all the time by the end of this video you should be really confident in using sketch and confident to make the switch let's get started if you go to the website at Sketchup comm you can just scroll down and see that it's specifically made for people who do software websites and product design it's built for you and me with features like toolkits and non-destructive editing vector editing pixel precision all that good stuff I won't say any more about it except that I love it and I think that you'll probably love it you can download a free trial this is not a sponsored video I just really really love the software and I think that would be a benefit for you to use it if you've never tried it so check out Sketchup com download a free trial and then if you like it maybe purchase it or not whatever after you install it all you got to do is come down to your dock and fire it up and you'll get this nice simple kind of pop-up you can start any project you can go back to recent files you can even work with some pre-made templates that sketch has for you but we are gonna start a new document simply by clicking new document if you've used modern design software this is gonna look really really familiar it's gonna have a panel on the left tools on the top and another panel over on the right that is contextual depending on what you are doing and using with this ginormous kind of artboard or workspace in the middle it's really really great and there's nothing on our artboard and that's because we haven't made anything yet when you download sketch your tools and your service might look a little bit because you can customize it to your liking simply by right-clicking and putting customize toolbar you could return it to the default if you wanted to but you can pull any of these extra tools and put them inside of the toolbar all of these tools can be found in the upper menu somehow some way but by giving yourself quick access here in the upper menu you really allow yourself to just speed up your workflow and kind of customize it to your liking so it may look a little bit different but you'll get the point one of the first things you'll notice when you fire up sketch for Mac is that this entire canvas area is blank you can draw things on it like squares and shapes but that's not really how it's supposed to operate here in sketch for Mac you're supposed to be working on artboards artboards are one of the key features of sketch for mac that allow you to not only do one design and then have to turn on and off layers but to do entire designs from start to finish i'm talking applications from the launch screen through every single little design screen you can have an artboard for and later on some special tools even prototype being able to see your design at a glance holistically it's gonna be one of the best things about Sketch and why so many other design platforms are starting to jump on that bandwagon now to make it artboard you can simply press the hot key of egg and that'll bring up all of the different size Apple device sizes Android responsive web design paper sizes and you can simply pick one like this iPhone 8 you'll notice that as soon as I've placed an artboard in my work area within this canvas here over in the left-hand panel this is the layers panel and you can see its title and I can rename this artboard simply by double clicking and naming it home and now you'll see the designator on the top of the artboard itself is named home if you want to move this artboard around simply grab it by the name you'll see the entire bounding box of the artboard is highlighted and you can simply move that around your workspace if you want to duplicate it like every other program in the world you can just alt click or alt drag and you can create a second artboard you can then select it in the layers panel and rename that one you can position layers in the layers panel so that you have some sort of understanding of where things are now that you understand our ports let's talk about one of the next biggest things to us digital designers and that would be working with a grid to open up a grid or a layout on your artboard simply select the arc where you'd like to work with and you can either go up into your tools panel and click the show layout button or you can simply press control L and that will turn on and off your layout or your grid if i zoom in you can see that it has a color it has spacing and if you'd like to manipulate all of the details to your grip go into your layout settings and you can actually change the gutters and the width the current grid that's being used is at 960 but if you'd like to bump that up you can see that it happens in real time so maybe I want something more like an 1140 grid and I want the whole thing to be centered and I don't like how wide the gutters are so I can close those up just a little bit now you have a customized grid that when you start drawing shapes on you'll know exactly where you need to draw them now my grid is established everything's working like I want it set up like I want it and I can continue working smartly for the rest of my project when it comes to designing websites and having multiple artboards because there's multiple screen resolutions having multiple artboards might be the way to go but there's also some plugins and some different things that sketch has to offer to make your responsive life a little less hectic one of the ways that our default and built into sketch that I just love are the different ways to pin and assign measurements and margins right there inside a sketch and we'll click on an item and you can see I have my resizing options that come in my contextual panel on the right hand side that contextual panel will change no matter what depending on what I'm clicking nine times out of ten when I'm selecting an object on the screen whether it be text or shapes I get resizing options and that just tells sketch when this artboard resizes what do I want to happen with this individual object that I'm working with so for instance if I was to take this artboard and resize it down you can see that my shape is still the same exact size but we don't want that we want it to be sent in the middle so now I want to resize my entire artboard just like you would a browser like when you're testing you can see that that shape has actually resized accordingly to the constraints of the artboard or to the browser window which is really really nice if you do a similar thing with grouped objects so if I took all of these here and I press command G to group them I can then say I want to fix the height and anchor it to the top and now you can see as I start resizing so does the actual individual elements within that group which is also really really nice you can't do things as extensively as you would be able to do in pure CSS like actually move things around and redirect them in something like flexbox or CSS grid but it's a great way to have some general responsive nature to your designs as you're designing we mentioned the layers panel over in the left hand portion of the screen right above that it's saying that we're on page one and so there are pages as well as artboards if you just drop down the area you can see that current page wrong you also have the ability to make a completely separate page like this one could be the wireframes and this one can be the low res mock-ups and then you can do high res mock-ups you can do any and everything you want to do and and leave things within their individual page really really good for versions and for the process of kind of bringing your designs to life we've touched on a little bit but dragging out shapes and actually creating designs in sketch for Mac is really really seamless and really intuitive you can see I have shapes up here in my control panel you can also add a shape by doing insert and any of these individual things here the tools you have to work with are basically shapes vector pencil maybe you want to use a pencil tool I've used it a couple times actually there's also text images add new artboards basic shapes are really really easy you can either select one from here or you can select one from the tool menu up top like if you wanted to do a triangle just simply click and now you can see the little cursor is ready to drop a triangle wherever you tell it to so I'm gonna drop that out of course those basic controls like holding shift to constrain the proportions all that kind of fun stuff and as soon as you have a shape selected again all those contextual options show up so I can change the color to it and add a border a couple basic you know style commands like shadows and inner shadows we can blur it if we wanted to so there's some of those basic things obviously we're working with shapes you have the ability to measure from one shape to another like if I have this red shape here you can see as I as I get close to it a lot of smart snapping guides show up which is really nice but if you're in a place that you don't have a smart snapping guide like here all you have to do is hold down the option and point towards any other object on the artboard and it will give you some form of measurement you can also align with basic alignment tools by selecting two things like this group of gray squares and this red rectangle and you can align things to left or to the right to the top or to the bottom you can distribute which is really really nice so has all those basic alignment tools you would need one of the most powerful features in my opinion of sketch is the ability to create styles whether they be shape styles or layer styles or text based styles and save those creating a catalog of style you're using your project that you iterate as you go and similar to CSS like cascading style sheets you're able to make that change that style or class so to speak and watch those changes cascade across your entire project let's say I was working with some text here and I'm just gonna type something out like this is my headline style and in working with my headline style I may be I'm gonna work with Helvetica but I really want this one to be bold I'm gonna create a text style up here in my contextual panel I'm gonna create a new text style called headline we'll just call it headline and it saved that style now any text that I'm working with I can change to be using that style that I've already designated now what's really great is later on on my project let's say this headline is not really big enough I really want it to be maybe that big like really big well what I'm gonna do is simply press this with double refresh arrow symbol this icon within the styles and it's going to update that entire style across my project you can see how great that would be for your body copy for your headlines something doesn't look quite right you want to go through every artwork change it you want to be able to just change everything on the fly in your entire project lights out amazing in a similar way sketch has allowed you to create reusable interface components that they call symbols symbols allow you to create one thing one time and reuse it and then if you need to change it on the fly it will change it everywhere creating a symbol is simple it looks like this taking something you've already made may be souping it up a little bit after I'm done doing that I have both of those things selected the text and the shape I'm gonna come up here and press this little icon that says create symbol notice how the create symbol icon and the style the text style icons are similar because they're reusable components so I'm gonna name this simple button and now anytime I want a button I can simply drop down and go to my symbols and I can add a button that I've already created maybe I'm all one up here in my big hero image as well I can move that whole thing up now if I don't like my button which I don't because the shape of the corners is a little bit funky maybe I want to go back and be a little bit you know a little bit more square like a rounded square I just double click and you'll notice I've been shot to a specific page that's been created for me it's a symbols page and and I can return back to the instance of that symbol or I can change the master copy of that symbol I want to do that I want to just you know take down those edges a little bit and maybe blues not quite my style I'm gonna move over to this purple and when I go back you'll see every instance of that symbol has been changed throughout my entire project hallelujah if the native features of Sketch weren't powerful enough already they've opened up the program to the developer community and allowed them to create amazing plugins that you can purchase for very cheap or the majority of time they're for free it has a great community a huge community of developers that are making awesome things for designers like you and me you can reuse pallets you can prototype you can put in stock imagery and lorem ipsum all - click of a button using amazing plugins and I'll put some links down in the description to some of my favorite plugins and even another video I did on some sketch plugins that are awesome and amazing last thing we got to talk about is want to sketch most amazing features and that is the exporting process here in sketch anytime an object is selected within sketch in the contextual panel down on the bottom right you'll get them make exportable option that comes up by clicking + you can assign different export sizes and you can export as many different sizes all at the same time you don't need to save them out one at a time like if I wanted to export this out for iOS or Android you could simply choose the size you want to do at 2x tell it how what you want the designator to be named as on the end of it and what format you'd like it to export out as you can export PDFs PNG s SVG's JPEGs all the normal stuff with normal image control as well and with a click of a button the export button you can put multiple versions of the same element in your directory like that if that wasn't enough sketch is also giving you some presets you can work with like iOS or Android so follow under work some Android assets as well I could export those and you can see BAM just in an instant I did five exports like that I also really loved the fact that you can select an individual element and you can even drag the layer you can see I'm dragging the layer and just drag that out onto the desktop as well or into your directory so you can actually just grab individual elements and export them like that overall sketch is an easy to use easy to learn modern workflow for the digital designer if you haven't used it I recommend you try it go download the free trial today and let me know what your thoughts are about sketch for Mac thanks so much for watching the video I hope you enjoyed it if you did leave a thumbs up and maybe think about subscribing to the channel I like to do lots of videos about design and development and product reviews just like this one so stick around if you have any questions make sure to leave them down in the comments and I'll get back to them as soon as I can I hope you guys are designing amazing things too making amazing things touch getting the next one [Music]

Channel: Jesse Showalter

Views: 437,377

Keywords: sketch, web design, introduction to sketch, how to use sketch, sketch for beginners, getting started with sketch, sketch app, how to design websites in sketch, website design, UI design, graphic design, design, Introduction to sketch, intro to sketch for mac, sketch for digital designers, jesse showalter design tutorial, software for designers 2018, best design software for web design, sketch basics, intro to sketch, sketch intro, getting started with sketch for mac

Id: qywB0JHQeC4

Length: 15min 31sec (931 seconds)

Published: Wed Jan 24 2018