Design Trends In 2020 and How to Create Them!

1. Design Trends 2020 - Introduction : Aziz. They say trends are your friends and in the world of design, being in the know on the latest trends is essential to staying relevant and up to date with your work. Trends can also be themes you see running through modern new design work. There's a reason we see themes become so popular. For instance, there's an emerging trend of using ultra chunky, ultra bold thoughts and typefaces in Web design and mobile app. Design Reason why is because chunky typefaces make for better readability. We're looking at small screens like a phone or and I watch. There's usually a fundamental reason we see these trends emerge, and I want to go over cell for off the ones I think could be long term designed shifts that will last not just for a few months but for many years to come. You never want to follow trends because they look fresh and cool. You want to follow them because they can change the way we interact and engage with the design or brand. They give us new feelings of exciting change and can give us a glimpse into human creativity. We're going to look at a few major design themes or trends that I believe will emerge or continue into the year 2020. But not only that will do some basic, simple projects that we could do together to help you emulate. Thes design trends are no the right software to engage and create them and make them a reality. 2. Typography Trends: typography gets little wild. Typography will continue to show movement in 2020 type, will move with animation, adapt to different shapes and conform to a wider variety of objects. Expect typography to try to break traditional right angle presentations and start to adapt to the world around them. There will be a shift away from blocky, unoriginal sans serif typefaces and a move into typefaces that have a little bit of personality. Like in this example, where you see more contrast in the thickness of the stroke throughout different characters you also seem or typefaces on the Web that have more slants, curves and unique qualities to them. Expect more broken typography with words scattered like a puzzle or broken glass type will no longer need to follow the logical left right order as it breaks the grid and takes a more natural feeling. You will see a lot of repetitive type treatments to give off a bold statement, look for more distorted, warped text to our wrapped text text will been to its environment and create almost a psychedelic effect. Work text was always something that seemed more experimental in the past, like modern art, but expect to see it to go more mainstream and branded projects in 2020. After this lesson, we're gonna hop into Adobe Illustrator and try out the envelope warp options to try out this effect ourselves. To rate the poster you see right here. And as support for more and more complex typefaces comes to the digital world will see more designers loading in custom typefaces on mobile and Web design layouts. One thing that will help a designer better customized typefaces is the rise of variable fonts, although still lacking in the amount that's available for use and download. Variable fonts will change on the fly, and you can adjust the thickness of the typeface as you please. You can also change the spacing between characters, change it how condensed the typefaces and some variable fonts, take it a step further and allow you to change the typeface and add custom characteristics to it. Support for variable fonts is still new, so right now there's not a ton available for us to use, but they're still out there, and the downloadable link guy that goes with the section of the course I will provide a couple of great resource is if you want to know more about where to find these variable fonts. There's a wonderful website called the Far Playground, which gives you a chance to test out these variable funds live with a variety of choices. This is something that needs to evolve and be implemented for a little while, but you need to at least have it on your radar as a designer, as variable funds could be the future choice by designers worldwide in 2020 and beyond. So we are in Adobe Illustrator And what? I'm gonna show you how to do that trendy, warped effect that you're seeing right here. We're gonna do our own version of this really quickly, and I'm gonna show you how it's done. And it's a lot easier than you think. We're gonna do some a repetitive type, which is kind of another trend that we went over just a little bit earlier in the video. Let's go ahead and do some words. Let's open up a new document so file new. Let's just do a poster size. We're gonna keep things a little simple on. Just do an 8.5 by 11. In your case, you could do in a four and a 10. Whatever kind of size is kind of your typical poster size, and that's gonna be a small little flyer poster is going to create. And I want to do some repetitive type and there's a little trick I'm gonna show you. So we're gonna type in the words in all caps. Design trends. Let's go ahead and set the typeface that we like. There's growing down here to see what would be a nice, thick, chunky one to use. We can use any of these. Let's use this as Oh Sands uber or I got another list of as owes. Let's just try something in the black so it's not quite as harsh. So now I need to duplicate this over and over to create kind of that poster effect so I could hold down, option and drag and continue to do that all the way down the paper, and that would take a little bit too much time. So here's a little trick. I'm gonna hold down option and drag, and that will create a duplicate copy. So now I'm gonna press command d just press command D and hold it to produce as many duplicates etc as you want. And that's very helpful for shapes and lines. I just wanted to kind of demonstrate this for you. I'm gonna do a simple pin tool, hold down a click, hold down shift to make a straight line, switch that to a stroke, and I'm just gonna make one copy first. So I'm going to do option drag that's made a copy. And now just press command D, and it's gonna replicate as many times as you want. This is such a huge timesaver. I wish I knew this 10 years ago when I was working an illustrator. And of course, he can hold down shift, rotate that by 45 degrees to make kind of your little typical patterns that you see in contemporary art and design. So now that we have our repetitive words, we could change the typeface If we want to make it skin here. It's never too late. Solis is due within, and we're going to start toe warp this type. So how do we warp all this type to get that same bending, moving psychedelic effect? We're gonna use our envelope, distort tool, and you can find that in the object panel go all the way down to envelope to store. So this is where we're gonna be living for the next few minutes. So let's select Oliver type and we can even group these together, so just kind of grouping or type together. And then we're gonna go to envelope Distort, and there's a couple different options. The easiest one is make with a warp, and it's gonna load all of your text warp options that you normally would have appear. But it's gonna allow you to bend all these things in different manners so we can bend it like that. This is using rise, and there's other ones, such as fisheye, which can kind of bend it inward or outwards. You could see some really cool effects that can create by simply doing the envelope. Warp options can even twist it. Give it that cool effect. So let's go ahead and go back in our history. Command Z is going back. Let's try something a little bit more advanced, so we're gonna go back up to envelope warp object, are enveloped, distort, and were instead of doing a make with warp, we're gonna make with mesh. So if you've played around with radiant meshes, this is a very similar way. It works. It's gonna create a mess for us. It's gonna ask us how many rows and how maney columns of anchor points we can edit to create the mash. So how complicated do you want your mesh? And we wanted to be fairly simple. So let's just do a very simple one. Just two rows and two columns and you compress on preview to see what I mean. It gave us a couple of different anchor points to manipulate. You could make that more complex if he wanted to. Let's stick with just two for now, just for an example. So now I can take my direct selection tool, and I can click on any of these anchor points it created for me, and I can twist and bend to my liking. So let's say I want to shift this over, make it look like it's coming out. I could twist it, give it a twisted look. So what is great about all this is I can still take change the typeface the type is then the font is still live. So all I have to do is to select the group text, and I could go up here and change this if I wanted to change this too bold or black. I can't just like that. So let's start to reverse this. I'm just going to just put a black background here. I can't even put this on another layer and lock it to make it easier, but just trying to demonstrate quickly. And let's make that white making kind of start to see that poster look coming together so we could go back. Let's say we want to continue to work this a little bit, so let's go back to envelope object envelope, distort. We can release it and go back to how it was originally without any warping. But we can also got Don't go down to edit envelope and it's gonna give us our controls again. Let's get her direct selection tool, and we can bend it on the side as well. So this is a very simple to anchor points per row to anchor points per column. Let's see if we can't release this so we go up to object envelope, distort and just release it, and we can go back to and delete that top layer and we could go back and make this even more complicated. So let's do that right now. Let's make it a little bit smaller. Zoom out and let's see if we can't make this a little bit more complicated. Envelope distort. We're gonna make a mesh and we're gonna do three. This time, we're gonna have a little bit more anchor points to control and warp. Get a direct selection tool. What's twist? This bad boy really make it unique and interesting. And each time I do this, it looks a little bit differently. Could do the sides as well. And this has control so you could do your handles to have more smooth transitions. Twist, twist and gives it that kind of three d, where it's going backwards and forwards. Is that twisting action? And so let's say we're ready to add some effects to this. We want to add Grady INTs. This is still live text, so let's say we want to create outlines on the text. That's gonna be what we're gonna do. We gonna go upto object, envelope distort, and there's something called expands. So let's select our object first and go down to expand, and it's gonna basically outline the type and it's gonna become one outlined object. So now we're free to work with us. However we want wouldn't go to a radiant panel. And so you could see how easy it was to create this effect. You couldn't work this as you desire, and I wanted to show you real briefly that you could do this with something beyond text. You can do this with shapes and lines. I'm gonna do what we did before we could just get a click, hold down shift and I'm gonna create a straight line. Just make it a white stroke, and we're gonna do what we did before. We're gonna just make a copy. I'm gonna hold down, option and drag over, and then I get to use our new command shortcut. Do command D and hold down. And just like that, we created all of our equal lines. So I'm gonna do what we did with the text. I was gonna group this together, and now we could do the same warping options with this, and this is really gets really cool and interesting. So envelope distort I'm gonna make with a mesh and let's do three this time. So I get three different points. So now and get our direct selection tool and do the same thing we did before. But you could see how really interesting this could look. You could twist these lines, make some really interesting patterns, and you could see some examples of some I've created using the same exact method. And just a matter of minutes, you can create some really neat backgrounds as well and stay pretty on trend with some of this warped, distorted look. So your challenge now as a student, is to go and practice this envelope to distort tool at Adobe Illustrator and see what you come up with with your typography. And if he wanted to experiment with lines and shapes and other things, you could do that as well. Love to see your work and see what kind of neat stuff he come up with. 3. Skeuomorphism to Neumorphic Design: skew more FIC design is nothing new. Huge in the Steve Jobs era At Apple, it was the art of designing user interfaces, buttons and icons with more realistic characteristics. This became a popular way to display icons and graphics because it was very intuitive and user friendly. We can see this in the Instagram logo. The older one had texture, details, lighting and mawr to give us this organic feeling. Then, a few years ago, and really in the last decade, we had a huge shift away from ska morphing into flat design. As we know, flat design has been all the rage, with simple single tone shadows, no blurring in an overall reduction of details on objects to give them a more simple presentation. A shift to flat design happened because user interfaces became smaller and smaller, and having a simple icon display in action or button was necessary. As in all things design, the pendulum always swings back the other way. We're oversaturated with flat design. It's clean, easy to use for sure, but there seems to be an overall lack of character with flat design. If everyone is doing it, does it become ordinary, dull, useful for sure and sometimes breathtaking in its simplicity. But humans have never been a group to stay still for too long modern skew, morph ism or new morph ism, as some may call it. It's not just what it was 10 years ago, but it's an evolution and how people use this design idea. Gone are the heavy uses of textures and highlights, and now comes the use of lots of lots of subtle shadows and highlights blurred to create this incredible layered look. This look feels as though you could touch it and feel the ridges of the glass and aluminum and plastic on your fingers. We loved to go into the store and just touch. Things were tactile. Creatures and toe have a design trend that gives us the feeling that the digital world can feel really through. The use of design is incredible. We can emulate curves through cleverly placed highlights and shadows. The digital world feels alive again and organic. So how can I practice or emulate this new, more Ficker scheme? Orphan design theme. It's more simple to create this effect than you realize as a balance of placing highlights , a lighter color and shadows are darker color and strategic places. You could create this effect using a wide variety of software, including affinity designer Adobe Photo Shop. But today I'm going to show you how to do a quick little project using Adobe Illustrator to quit it, create a quick skew more FIC design button. So today we're gonna get a chance to practice this very new design trend that you're seeing everywhere. But it's a little bit more simple than you think. It looks like it's a pretty complex effect that it's really just ah highlight layer, a shadow layer and some simple flat shapes to create this effect. And I have This is a downloadable file. So you could work alongside with me for this very quick five minute project. We have some simple colors we can borrow right here is gonna hold down option, drag him down so we can recreate everything. Ourself We're gonna be creating this off state button. So a button that hasn't been pressed yet It's kind of in the off state. We're gonna create a simple, rounded rectangle, hold down shift very simple rounded rectangle and the key to skew more FIC design is the color on the inside of a shape is gonna be the same color as the background. We're gonna take her eyedropper tool and sample or background color, and right now you can't see it. But that's OK, because we're gonna be adding or highlights and shadows so you'll be able to see it almost pop off the screen. So we're gonna duplicate or shape, and we're gonna create our shadow first. So what we want to do is usually double click and just find one shade darker. So just moved down on your color panel to find one shade darker or already have kind of a color selected for That's a little bit darker color, and we're gonna send this backwards into the layering system. So command left bracket and we're gonna position it off a little bit. So instead of being right here, it's gonna cast the shadow to the bottom, right? So now what we want to do is create the highlight layer. So we're just gonna do the same thing and we're gonna make this make this white, which is gonna be brighter than the background. There's gonna be your highlight. It's gonna be to the upper left forget to send us backwards to the layering system and shifted up. And we don't want to do a bit a lot of shifting. What we want to do is make it pretty tight about this area. We just have a highlight and a shadow layer. So what we're gonna do to create the effect is we need to blur this pretty dramatically. We're gonna select the highlight in the shadow layer, and we're gonna blur those two shapes behind our main shape. We're gonna do this by going to effect blur. We're just going to do a Gaussian blur. We're going to click on preview to make sure we have it on the right levels on. Let's try about 30 30 pixels said. Now, all of a sudden it looks like it's popping off the page. We could, of course, take our highlights and shadow layers that could tuck them in tighter if we need to, because she could see how the effect is already starting to come into place. And it's just three simple squares. Ah, highlight square, a shadow square and the same color square in the centre of That's the background, it's adding, are simple icon for the button. I have this icon I did with a Nikon set we design in the digital design masterclass. I'm gonna borrow it right here and place it into the icon. So how do we make this icon feel a part of this button? Like there's almost a gloss on top of the button like a glass. We can go ahead and make it a caray deign to kind of give it the sense of highlights and shadows, just like we did with the button. So I have a great and already created here were to do a little bit of a darker color because we want the icon to still stand part of in front of the background. Cem's gonna adapt this radiant get arc radiant tool and have it be the highlights on the top and shadows on the bottom. So now it looks like it's a part of the button causes adapting the highlights on the upper left and the shadows of the bottom right. We can add even more complexities to this icon by duplicating it, making it all it even darker color to emulate a shadow. Let's try this darkest color right here. What we're gonna do is just basically Adam in her shadow here. You could take our icon, put it right on top. And I'm just gonna take my down and left arrow keys and to slightly nudge it over. So now what we're gonna do is go toe, grab the layer behind it and the layer in front of it, and we're gonna just duplicate this and bring it down here. We're gonna basically cut out these shapes toe leave, just what we want as kind of the inner drop shadow. We're gonna get our shape builder tool right over here, and we're gonna click on the option key for subtraction. Were just carving a little bit of this out. So we're just left with what would be kind of an inner shadow. So we're gonna bring this on top of our layer. We no longer need that top layer. We just need the layer we created with the Grady int. We're gonna bring it on top right over top and make it that darker color and that will be our in her shadow. Just gives it a little more depth and dimension. It's really a small detail. You don't necessarily have to add or do this part that's a little bit of a drop shadow. So when you zoom out, it adds a little bit of depth and dimension. There's just one more thing we need to add, and right now it looks great. But there needs to be some kind of highlight or border. A very thin border around the edge does add just a tiny bit more detail because this isn't just a flat Icahn. It has plastic. It's got glass on it. We need to have a little bit on the edges to show highlights and shadows. There is a duplicate the square we already have, and we're gonna make it a great in a very light radiant. We're gonna use this, Grady. It's watcher right here. We're gonna change the direction on this. So we have highlights on the top and shadows on the bottom, and we're just gonna flip it to a stroke, and we're gonna make it pretty thin and have it be a border right on the outside. Just like that, we added a little bit more dimension with the highlights and the shadows by adding that very thin border. So let's see what the stroke is on. This Just going to our stroke panel. We can even reduce that to make it uneven. Skin your stroke and voila! We have our little button. So this is our off state button, and we just need to create our on button. So this is the on state button where the person presses that are the mobile app or wherever they're going to be having this button available to them. So now we need to emulate what it's like to press his button into and pass. The background was pressing in. It's gonna go down a little bit. So one of the big things we're gonna do is switch the highlights and shadows. So instead of the shadow being in the bottom, right, it's now going to be inside and in the upper left. Same thing with highlights. Highlights are on the upper right here. This little highlight layer that we created in the very beginning, right up there on the top. It's now on the inside and also on the bottom, right? So the highlights and shadows not only switch, but they become now inside of the button to give a field of depth or a sense of depth, like the buttons going downward. So we're just gonna copy our existing button and we're so good, it kind of flips it things. Some things around here, we could take our highlight and shadow layers off. And let's first bringing our shadow on the upper right. So we're gonna need to change the shape of this. We're gonna need to reduce the Gaussian Blur here so we could do this by going toe. Our appearance panel going down is changing, or Gaussian blur, that we have on here just reducing a little bit, maybe 15 and we're gonna duplicated What we're gonna do is ready is the shape builder tool to carve out what we think would be a good shadow. So what we're doing is we're carving out a shadow that's basically gonna take on this shape . Let's take both of these, tighten that up a little bit. We're gonna select both of these and go to our shape builder tool And where is gonna punch this out, holding down the option key and punching that out. So we're left with just this shape of a shadow. We're gonna bring it right here on the inside of the button. Make sure it showing up on the top layer and we're gonna do the same thing. We already have the shape created. So let's just copy and paste this and I'm gonna show you a cool trick. So I'm gonna hold down the shift button, go up to our directional controls And now that I have this shift button held, it will automatically do it in 45 degree increments. So I'm just gonna transform this to the opposite corner. Just like that, we can go ahead and make this white. Yes, we don't need to have this shape anymore. We already just kind of duplicated that that's gonna exist on the inside as well to send that backwards and have the shadow be dominant and be on the top right about there. So now our button already looks like it's pressing inward. Have one more step to make it really feel like it's being pressed inward. We need to make the stroke on this out side stroke layer a little bit thicker. So instead of a weight being a 0.75 pixels or points, we're gonna change that to make it just a tiny, bit thicker to kind of give more depth and something we're gonna do to even add just a little more realism as we were gonna add a rolled border to the outside border. So what that means is, you see right here how it almost looks rolled because it has kind of, ah, a shadow on the left. And then it has kind of a highlight on the right. So it almost gives an effect of this rolled shaped border is not just a flat border, it's rolled. We're gonna do that by creating a duplicating this stroke and making it darker. So let's make this stroke a little bit of a darker color, but not super dark right here. And just make sure that's a stroke. And one thing we're gonna do is we're gonna do a Gaussian blur on here. Gonna make sure this is on the outside right about here. And what we're gonna do is we're gonna just do a Gaussian blur here, cause right now that's really sharp. We're gonna go up and maybe even make this pretty skinny 0.5 go up to effect go down to blur and let's do a Gaussian blur. We don't want it to be very dramatic. We wanted to be just a little blurred and click. OK, so it gives us kind of this rolled border. Look, we might need to reduce that a little bit more, and let's lighten that color up just a little bit, a little bit lower contrast. So there we go. So now it looks like it's a little bit more rolled, a little bit more pressed inward, so that is our on state, and this is our off state. So it just recreated that step by step. This is the one I created before the classes of the one we just did. Not a huge difference. That's a good thing. And you can do the same thing with longer buttons. So this is using the same exact method. So we have the highlight on the top left, and we have a shadow on the bottom, right, and we have this color that's the same color as the background is. You could do this with any shade, so even if you had a dark you, I you could do with dark colors. You just have to don't even have a color palette in the downloadable resource. We can check that out. So you could do this with anything, As long as you follow the same basic steps. You could do this with any color and any shade. 4. Hand-Drawn Assets: pan drawn assets. Creating hand drawn assets to use in your design pieces is now easier than ever with the latest version of Procreate five or adobe fresco digital sketching caps. You can even use your wakame tablet and photo shopped to produce and add that hand drawn feeling to your designs. Before the popularity of digital sketching APS, it was a little bit difficult to bring in hand drawn assets, although it wasn't impossible through the use of taking a photo with clear lighting, removing any background that there wasn't voter shop and doing some color editing of your work to be able to use it and bring it, bring it in digitally. But now, with digital sketching APS, we can instantly create organic looking brushes, pencil strokes, pin watercolor strokes and export them into photo shop, and they're ready to use in minutes. This is a wonderful trend to embrace because as a designer, you can use traditional artistic methods and apply them to something they used to be so static it computerized were no longer stuck with this clean, simple shapes. But now we can had shapes with a natural, real human touch, as you could see with most modern design trends. It's all about reconnecting with her past. Stuck on our phones all day with colored uninspired shapes and boxes, we crave something more normal and more natural. You can even incorporate hand drawn assets and social media campaigns like I did in my latest digital design master class, where we create several hand drawn assets and use them instead of our default fonts and computer John Arrows. I'm going to show you how easy it is to bring in a few hand drawn assets that I created him procreate and bring them into in design to create a magazine spread with a natural hand written headline. So I'm gonna demonstrate how to do some hand drawn assets and procreate five. We're gonna bring that into photo shop and fine tune those a little bit. And then finally, we're gonna pop it into an editorial, spread a magazine spread so we can kind of show off more of our authentic hand drawn style . So I'm gonna go into procreate right now and create a new document to a new document, and we want to create one that's as large as possible cause we're doing this hand drawn assets. We bring them into Photoshopped, they're gonna be raster. So we're just gonna do a 4000 by 4000 canvas. And so for editorial spread, sometimes it's nice to go ahead and get a plan of what kind of hand drawn assets we want to include. Inter document. And so sometimes I will source the photo first for the editorial spread. So in this case, I'm gonna go ahead and load one end, go to settings, add I'm gonna insert a photo that I found on pecs als dot com, which could find a lot of free great photography I'm gonna add in this wedding photo and I'm gonna go up to my layers. I'm just adding a new layer. So this works a lot like photo shop and click over here on the addition sign at a new layer was great about this is when we export this as a photoshopped file, it'll all be in different layers, so we don't have to separate any elements. They're all beyond their own little layers. So now we're gonna create it's gonna be 2020 wedding trends. So I wanted to do is do this raw, authentic 2020 kind of marker. Look Oh, that will go over the middle of her and then have kind of a gold swoosh that goes across and put some typography in there from photo shop are in design on top of that gold swoosh. So we have a separate layer. This is gonna be where 2020 is gonna be written. And I'm gonna do a simple marker. Or I can kind of go through some of these different brushes to figure out what kind of look I want to go for. Most of the ones I use that are thick and chunky. You're gonna be in the inking and especially the one in the drawing category. And I got to use this one called gloaming. Go ahead and select the default options for that. I'm gonna choose a white color is going up to my color panel on doing white. So I got to just do a couple of different versions here, is doing 20 20. I'm gonna make sure my capacities at 100% you could change. This brush is well, we can always create new layers and do as many of these as we want, because when we export does a Photoshopped file and bring it in with all these different layers different kinds we can choose from. We not may not like the 1st 1 that we did put them on different layers who can kind of have , um, separated. I might even do a smaller brush size, so there's kind of three different 2020 options. I could continue to do this for another 20 minutes, getting 20 different versions, broker or leave it right there. I got its toggle these off Just the transparency on the ones that I I want to keep that one . So let's do kind of a swoosh asset that we can use to put our next part of our title on. So we're gonna do that and we want to make it gold. Let's get a little inspiration from the photo. I'm just gonna hold down my finger and see if I can't find maybe a color that would look really good, switched across and already had kind of a gold color picked out. I have my history right here is gonna click on a gold watch and we can use the same one, or we can try some different brushes. So let's keep with gloaming. And I'm gonna do a big brush for this cause it's gonna be a nice swoosh that's gonna go across, does something to put our type on. And once again, we can do as many of these as we want and then choose the one we want at the end. And we could even do a different brush. So let's try Blackburn. That's a lot more that not is transparent, is it? So that could be a different look, Eagle Hawk, Maybe go back again with the brush to make it a little less transparent. Try this brush next and you brush it anywhere because these are all layers. So it doesn't really matter is when we export it in photo shop will have total control over it. So there's kind of some quick assets we have here. These are all in different layers. Wanna go ahead and topple them all on and we're gonna export. This is a photo shot file. So go ahead, bring these assets in. I'm just gonna toggle off my background color cause we wanted to all be transparent, and I'm gonna toggle off my photo because I'm gonna bring that in in photo shop. It was just for me to get an idea of the placement of items so I don't even need my photo anymore. We just need these different assets together. We're gonna go to settings and export as a photoshopped file. We're gonna go to share and do Photoshopped file PSD and I'm gonna bring this in and I'm gonna use Google Drive to bring it over to my desktop computer and I'll see you an adobe photo shop. So here we are were in Adobe Photo shop who were ready to bring in the assets we created. We have a photo shop file for that right here. So this is how our assets should look, Should be on a transparent background, all these different layers, and we can kind of pick and choose which one we think would work really well. And we have a couple of different options. You can always toggle on the background and make it a little bit darker so you can see what your assets look like and lock that layer. So now we can kind of choose what, 2020 And what kind of swoosh do we want to bring in. And I had a chance to do a lot of different styles, and this is a downloadable resource for you guys. You are free to use thes assets however you'd like and, ah, test projects, commercial projects, personal projects, all different styles. So if you want to use a different photo other than wedding, you can test out kind of using those hand drawn assets in your work. So for this one, I'm trying to think of a few that could work. So just kind of selecting. Maybe these two. I want something a little softer. Somebody's a little grungy for wedding. So I'm just gonna take these middle to. We're gonna go ahead and place him on the document kind of see which one we think would look really good. Let's try this when we can make it slightly bigger and angle it. We can always right click and make it a smart layer before our smart object. So if we can scale it up and down without losing resolution, so there's a couple things we can do to make it pop. We can add a slight drop shadow to this Could have it be a nice big spread and not a very heavy opacity. So now we need to bring in our gold swoosh because we want to have our little design trends right below it. And this is then the typeface sign painter, if anybody is curious, is kind of looking for a nice, soft script typeface that would go really well with weddings. So we have a lot of our gold swooshes here. We could pick out a few that would think weaken it would work, and we're just pasting these assets in dragging it below. And just like that, we have a nice background paints watch. We can even find one that hasn't angle or go back and do one with a slight angle and also angle or type if we wanted to. I have another little downloadable resource that has a series of numbers and also the swoosh we ended up using for the project. Let's try a different version. Let's duplicate this and see how it looks. We're just gonna warp vortex slightly to give it a little bit of a bend. Gonna go up to type. We're gonna just warp our text, and we're going to do a arch. Very little arch, very tiny with an angle. It So we can figure out which one we think looks trendy because it kind of a little bit of a layered look, and we could just position or type. Then when we are ready Chicago off. What we don't need we could do some slight photo editing to the photo is gonna de saturate it just a little bit so that gold really pops out and sharpen the photo. So now we're ready to bring it into Adobe in design. So we're just gonna save this as a simple photoshopped file. We're gonna be an in design. I've already created the left side of the spread and I might even want to put this on the right side. That's not a big deal. And another thing we could do. If it comes into Biggert Super high resolution, we could just make a container and drag it into the container. We can right click, and we're just gonna fit it fit, fill, frame proportionally. It's just gonna go ahead and size. And for us, we can always do that manually. And so there we go. We're able to bring in some hand drawn assets very quickly. We've been able to do that this in less than 10 minutes just to kind of add a little bit of pop and personality to our headlines to our editorial articles. And could you also do this with social media? As you see here? I did all these hand drawn arrows and assets. I did this in the digital design masterclass. We put this together. We went a little bit more in depth and what I just did with this lesson, and you can create social media stuff, everything in the design world. I think this is a huge trend. Moving forward is his hand drawn stuff, and with procreate, it makes it really easy. But it doesn't mean you can't do the same thing with the wakame tablet or with cheaper drawing solutions. 5. Movement in Design: as I mentioned earlier in this series of videos movement as a big trend in all things design, but not just with typography. This means more GIFs and videos take centre stage in the design pieces and in advertising motion could do wonders to catch one's attention. Are busy clutter digital lives. There's many studies, and some conducted by Facebook and other major players. That points to the benefit of adding a little motion to your static. Adds stories and photos as they tend to yield higher conversion and click through rates. And it doesn't always have to be. This fully animated three D video it could be is a simple four frame gift that allows designers to show movement that drawls users eyes to the screen. It could be adding slight animation to Social Media. Post are making small elements moving your design. It could even be for presentation purposes by showing your work in action on the Hanse dot com, for example, are on your portfolio animated GIFs or nothing new, and they're not just for cat names anymore, but they're a great way for a graphic designer to become introduced, toe adding motion to your work as It's super simple and easy to learn, and the next lesson we're gonna quickly learn how to do. A animated GIF in photo shop will be doing a simple six frame animation and exporting it as a gift to use on our website, social Media and more. There's an adobe software app called Adobe After Effects, which is included in the adobe creative called subscription that is a premiere pro software solution toe adding animations to your designs and typography. The software is next level stuff. If you're wanting to move past simple GIF animations and into something more detailed and immersive, especially animation with typography, any time you'll run across the super smooth animation like the one seen here, it's a good chance that was created using after effects, photo shop and other give creation programs. Use a series of photos to create your animation and after effects, uses algorithms to create a much more silky movement. But do be aware of the steep learning curve. It's been cold photo shop with the timeline meeting. Not only is there complexities of adding effects, but she also now have this timeline to think about and in some cases, a three D space. You can use it to animate just about anything, including logos, animated posters, movement and type and social media ads and videos. Today we're in Adobe Photo Shop, and we're gonna use the timeline option to create a very simple six frame animation. Just like you're seeing here. We're gonna have some simple typography come onto the screen and off of the screen. As you can see, once you learn this way of doing GIF animations, you can apply it to so many different things, including social media campaigns and anything that has pictures, photos, type or graphics. So we're gonna open up a new document and Adobe Photo Shop. It's gonna be a standard instagram size post. So let's do 10 80 by 10 80 uh, pixels with 300 peopie I resolution and have everything else be default Glenn and click on Creates doing a simple instagram post size we're going to do is go over to our layers panel and we're just gonna add a simple background is gonna get a rectangle tool, and adding a simple background to our instagram post will make a nice, colorful grading risk of the double click and add one in our layer styles panel is doing a little Grady in overlay. We can, of course, change the direction everything is going and have it be lighter on the top and click OK, and we have everything set up. Now What we're gonna do is we're going to go up to window and we're gonna load our timeline . So window timeline, this is how you do All of your GIF animations is through this panel. Now it's gonna ask you for two options to create a frame animation or to create a video timeline. So creating a video timeline will give you the chance to have more detailed control over typography and fading in of photos and movement and acts a little bit more like a video editing program where you have key frames and all sorts of complexities. And I go over this in more detail in my digital design masterclass, but we're gonna create a very simple frame animation. This is gonna be even more simple to do so we're gonna create a frame animation and click on the button that's gonna load our frames. So I created three different type players. I want Thies to slowly fade in and slowly fade out as a part of our animation. So what we want to do is we want to get all these 20% opacity. So right over here on her layers panel, we want all three of these to be 0%. We want them all to start off as they're not on the screen. It also it's gonna reduce all these 20 opacity right there in her layers panel, and we're gonna create our first animation frame. It's ready to go click on here and add a new frame. And for the second frame, we want our first word happy to show. So we're gonna go to our happy layer and increase the capacity. And now we're ready for our next animations. We're gonna do another frame, and now we want the next word to come in so new we're gonna make that 100% opacity. We're gonna create a new frame, and we want our last word to come in. Make that 100% opacity. So now we're gonna have the the word slowly fade out. So let's create another frame Now We want year to fade right back out create another layer . Now it's time for new to be reduced back to zero in her last frame. We're happy is down to zero and was great about this. Is if we do loop it, we have one. We're ending on the same frame that we're beginning. So you're not going to see a lot of changes between these and it's gonna be ableto loop very nicely. So let's say we want to play a loop. We're gonna go right down here. You'll see the word forever where you go ahead and do the drop down arrow and select looping options. We're gonna make sure it's set to forever. So it continues the Lupin Lupin loop so we could go ahead and hit the play button, kind of see how it looks. And it's a little bit too fast. And that's no problem. Right now we have almost zero seconds. This is the time between each frame transition and zero seconds was gonna be incredibly fast. But we can hold down the shift button and select all of our frames, and we could change them all the same time to be around 0.2 seconds. So that's gonna add 0.2 seconds between each frame and make it a little bit slower. So let's play. It's still a tiny bit fast, but you could put your own custom time in here. So instead of 0.2, let's type and other and do 0.3 seconds between each flame. Click on OK and let's see how that looks. And with each one of these frames, you're not stuck, which is typography. You can bring in photos and bring them out. There's a lot of things you can do with frame animation, and there's also something called Tween ing right here. And what tweeting does is it adds extra frames between two France animations to make it a little bit more drawn out. So let's say I don't want the words just to pop out. I want them to slowly fade in and slowly fade out. What we could do is we can add a tweeting animation between happy and new, so I'm gonna click unhappy and click right down here on Tween, and I'm gonna click on it. It's gonna add a couple of extra frames for me and let's add five frames by default. We're gonna click on OK when hadn't loaded five extra frames for us. So now between the two frames, I have the opacity being reduced or increased to show the word happy. So now it's slowly fades in the words. And so that's what tweeting does is it adds this extra. You know whatever frames you want to add in to make the transition more smooth, then go back and play. You could see out, fades in and he can speed these up a little bit faster. Let's take our Tween frames and let's make that a lot faster. You could see how the word fades in a little bit. So there's also the tweeting option. I wanted to kind of show you guys. So how do you export and see a gift when you're ready and you're happy with the animation? And let's go ahead and go back in our history and just remove the tweeting. Let's go back to our simple six frame animation. So now we're ready to export. We're gonna go to file export, and we're gonna go down to safer Web legacy. It's gonna give us a lot more options when exporting gifts, and we can change the size of her gift by reducing the amount of colors and quality of her gift. But right now, since the pretty simple one, I'm gonna keep it at the best quality possible. So 128 dithered by default is perfectly fine. Same thing with Rick colors. The more you reduce the colors, the more the file size will be reduced and you could see the file size right down here in this area, you'll see it's only 100 3 kilobytes, which is nothing. It's a fantastic size to use a lot of these options. You can leave as default, and we could go ahead and click on Save. You can also have some looping animations right here down here. It says forever. But you can also just do it once if you just want your animation to play once and stay on the final screen. But right now we're gonna have it loop. So let's do forever and save. So let's say I want a preview. Our little GIF animation. When you double click on it, I'm gonna went a Mac, and I think the same thing happens on the windows. You'll see all the frames broken down into different images. Which is exactly what a gift is, is a series of images put together as an animation. What I want to do is I want a preview it in a browser. It's going to drag it over to a browser in this case, Firefox, and we could see our animation happening. And now we're ready to upload it. Well of a simple framed gift is this example of a social media post where we can kind of bring in typography, bring it away, have things come in and it just creates a more dynamic image instead of just a static image . Just adds that little extra bit of movement, and it doesn't take a whole lot of work. And by the way, these air hand drawn assets you're saying that I didn't procreate, so you can kind of have something a little bit more exciting and dynamic than just simple typography from a computer. I go over more complex, timeline driven gifts, which is the other option that showed up when I first started that the frame gift. We go over that in much more detail in my digital design, Master Glass, where we do 45 minutes to an hour to create kind of a little bit more complicated of a timeline driven gift. If you want to have more control over fading in zooming in the photos, that's definitely the way to go. But for this class, I wanted to just do a brief introduction, the most simple form of gift that you could do, which is the frame animation gift. 6. Bold Geometric Shapes: bold geometric shapes. This is by far the biggest and most popular trend I see and design. I spent hours and hours researching projects on V hance dot com, and geometric shapes came up in all categories. An animation print design, editorial design, branding package and logos. They could be bright, vivid or used a settled background. Heroes. Geometric shapes can have solid are thin strokes or lines. These geometric shapes could be overlapped with blending modes to create shapes within shapes, And it can also be used in simple patterns to create a wide array of flexible brand assets . What is great about using geometric shapes and design is it provides another visual outside of typography that can help Ty Parker V stand out or help the overall design piece filth feel filled out without the use of photography. And we can't forget about the geometric shapes, influence on logo design and the sense of order a grid based geometric logo can bring. It is relatively easy to get started, creating geometric shapes and the W illustrator. By using some grids and the snap to grid options, I am get a head over to Adobe Illustrator and demonstrate this right now. So here we are in Adobe Illustrator, I'm gonna demonstrate how to create kind of some very basic geometric shapes to get you started thinking about this more abstract design trend. It's one of the first things you're gonna want to do is open up a new document and you gonna want to make sure grids are shown. So the first thing you're gonna want to do is go up to view and make sure your guides are clicked on. Guides are gonna be a big help in creating all geometric shapes to click on show grid. Another very, very helpful tool is thes snap two point. So everything you create will snap to the grid, and that's gonna be incredibly helpful. And speeding up our workflow so snapped a point and now it can create some basic shapes. And we're gonna create some Onley using circles for this task. We're gonna get our lips tool, and we could hold down shift and create a perfectly dimensional circle. It's was snapped, agreed it. It's so much easier to do so now it could just hold down option and drag. You know, we can create a series of circles we can even duplicate this and we can get our rectangle tool to divide this perfectly in half, using the shape builder tool. So selecting all my objects and I go over this and a lot of my other design courses had it kind of used these basic tools and adobe Illustrator, but is showing you how quick it is. We can even reverse this hold down shift when you re rotate and it'll do it by 45 degree angles, which is such a helpful and hold on option Dragged is creating some basic little shapes here. You even bring these down and make him different colors. Hold down, shift do, do, reflect into a different color. So this is being creative and finding these different shapes that can interact together. So let's create this kind of donut hole. We're gonna grab the Ellipse tool to make a pretty big circle. Let's go upto object path And what we're gonna do is we're gonna offset the path we could preview that click on OK, and what it did is it created two circles for us. It offset the path of teach all this and a lot of my design courses and select both shape that shape older tools a huge tool, beneficial tool in helping its create all these shapes. So there's a simple doughnut. We can create complex shapes within the doughnut by once again putting shapes, overlapping them, taking that shape builder tool and punch him out, holding down that option key and so you can create a wide variety of shapes. Let's say we want add a little pattern on here. What we could do is do our little trick. We did in a previous lesson. Click up here, hold down shift, create a line. Gonna do option and Dragon was creating a copy. And then I'm duplicating that copy by doing command de creating her line system. Now we can group this together, hold down shift, rotated perfectly by 45 degrees, and I could overlap it, select both of my objects. I'm gonna go over the Pathfinder, and I'm first going to need to outline my path. So it's gonna goto object path outlined strokes. And now I'm gonna be able to punch this out using the Pathfinder. Let's try minus front. And that worked well to cut everything out to create kind of an interesting shape, and he can combine all these different shapes using that shape, older tool and the snap to grid tool to create these very precise geometric patterns and string them together just like this. And your task now is to go into Adobe Illustrator and create your first geometric abstract poster using a combination of just circular shapes.