Digital Design Masterclass for Graphic Designers | Lindsay Marsh | Skillshare

Digital Design Masterclass for Graphic Designers

Lindsay Marsh, Teacher & Freelance Designer 14+ Years ✅

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
65 Lessons (9h 18m)
    • 1. Course Preview - NEW

      4:55
    • 2. The Course Guide IMPORTANT!!!!

      3:43
    • 3. Introduction to Design for Digital

      6:18
    • 4. Design Theory for Social Media

      5:39
    • 5. Design Theory for the Web

      11:47
    • 6. Design for Accessibility

      2:46
    • 7. Effective Digital Layout Theory

      7:13
    • 8. YouTube Thumbnail Project

      10:32
    • 9. YouTube Thumbnail Project - 2

      10:51
    • 10. YouTube Thumbnail Project - 3

      10:12
    • 11. YouTube Thumbnail Project - Double Exposure

      14:29
    • 12. Social Media Campaign Project

      10:58
    • 13. Social Media Campaign Project - 2

      8:09
    • 14. Social Media Campaign Project - 3

      8:25
    • 15. Social Media Campaign Project - 4

      10:10
    • 16. Social Media Campaign Project - Instagram

      9:09
    • 17. Social Media Campaign Project - Instagram 2

      7:07
    • 18. Social Media Campaign Project - Display Ads

      11:46
    • 19. STUDENT DESIGN CHALLENGE

      0:52
    • 20. Animated Gifs in Photoshop

      12:57
    • 21. Animated Gifs in Photoshop - Photos

      8:29
    • 22. Animated Gifs in Photoshop - Exporting GIFS

      7:02
    • 23. BONUS - Making GIFS from Videos

      7:10
    • 24. E-Book Cover Project

      10:06
    • 25. E-Book Cover Project - Shadows

      11:06
    • 26. Hand and Procreate Lettering

      8:37
    • 27. E-Book Cover Project - Exporting

      5:11
    • 28. Creating Hand Drawn Digital Assets in Procreate

      9:47
    • 29. Creating Hand Drawn Digital Assets in Procreate 2

      13:15
    • 30. Using Our Hand Drawn Assets for A Social Media Project

      11:58
    • 31. Using Our Hand Drawn Assets for A Social Media Project - 2

      10:22
    • 32. Digitizing Sketches - Setup

      7:06
    • 33. Digitizing Sketches - Pen Tool Tracing

      7:12
    • 34. Digitizing Sketches - Coloring

      10:49
    • 35. BONUS - Puppet Warp Tool

      1:49
    • 36. Icon Set Design Project - Grids and Setup

      6:49
    • 37. Icon Set Design Project - Getting Started

      9:12
    • 38. Icon Set Design Project - 3

      8:37
    • 39. Icon Set Design Project - 4

      13:59
    • 40. Icon Set Design Project - 5

      8:30
    • 41. Icon Set Design Project - 6

      6:59
    • 42. Icon Set Design Project - Adding Color

      5:16
    • 43. BONUS - User Testing with a 5 year old!

      4:51
    • 44. App Store Icon - Getting Started

      10:17
    • 45. App Store Icon - Gold Bar Effects

      6:57
    • 46. App Store Icon - Gold Dials

      9:22
    • 47. App Store Icon - Exporting

      4:03
    • 48. Website Landing Page in Adobe Xd - Getting Started

      8:10
    • 49. Website Landing Page in Adobe Xd - Illustrations

      9:34
    • 50. Adobe Xd - Crash Course

      15:58
    • 51. Website Landing Page in Adobe Xd - Getting Started

      7:51
    • 52. Website Landing Page in Adobe Xd - Photos

      8:09
    • 53. Website Landing Page in Adobe Xd - Landing Page Details

      11:21
    • 54. Website Landing Page in Adobe Xd - Pop up

      10:15
    • 55. Website Landing Page in Adobe Xd - Prototype mode

      8:44
    • 56. BONUS: Global Styles

      3:23
    • 57. Exporting Assets from Adobe Xd

      5:55
    • 58. Introduction To Building A Wordpress Website

      6:32
    • 59. Wordpress Crash Lesson

      7:12
    • 60. Getting Started with Elementor Plug-in

      12:50
    • 61. Wordpress Website - Header Video

      12:07
    • 62. Wordpress Website - Creating other sections

      9:51
    • 63. Wordpress Website - Creating Our Instagram Feature

      9:55
    • 64. Wordpress Website - 3 Column Layout

      11:57
    • 65. Wordpress Website - Responsive Design

      5:31
194 students are watching this class

About This Class

The future of design is digital. This course was designed to get graphic designers up to speed on the latest and greatest digitally focused projects so they can expand their skillset and offer more services.

This course is massive covering so many Digital design projects from social media, icon design, web design and more.

SOCIAL MEDIA DESIGN (Youtube, Facebook and Instagram)
ANIMATED GIFS
DIGITIZING SKETCHES
CREATING DIGITAL BRAND ASSETS 

ICON SET DESIGN
APPLE APP STORE ICON DESIGN
E-BOOK COVERS
WEB DESIGN USING WORDPRESS
LANDING PAGE DESIGN USING ADOBE XD

We first cover Digital Design theory and talk about how to craft compelling social media posts, web layouts and more.

Next, we conquer several popular digital design projects including creating several YouTube thumbnails that drive users to click through. We even create an entire social media campaign and talk about how to design for facebook, instagram. We even talk about creating display ads for websites so you can feel comfortable expanding your skillset to all types of digital ad creation.

Need to know how to create animated gifs using Photoshops Timeline feature? We will create an animated display ad from our previous campaign and add movement and animation. We will also learn how to create GIFS from imported video clips.

Have you wanted to know how to create a compelling e-book cover? We will do just that and learn how to design for e-book covers. We talk about sizing, exporting and how to create a design that grabs the viewers attention. We will go over how to take hand written type and bring that into photoshop to use on our e-book and also learn how to work with other sketching apps to bring in hand written assets. We also create our own mock-up to display our final design. 

A newly added project goes into more detail about how to create hand drawn assets in procreate or other sketching apps and how to bring them into Photoshop to create modern, dynamic campaigns that have style and a unique flair. 

Do you like to sketch or illustrate? I even created a step by step project where we take a pencil sketch and digitize it using Adobe Illustrators Pen Tool. Knowing how to digitize sketches is a big part of expanding your skillset to the digital arena. 

Icon design is at the center of any digital design projects. Icons can be used on websites, mobile apps, applications and more. Using a handy provided template we will create an entire cohesive icon set. We will learn how to use grids to create a thematic set and even learn how to add color and how to export our icons in all the right sizes for use everywhere. 

After creating a simple, basic icon set we go even deeper to create a highly detailed Apple store App icon from scratch. We learn lots of tools, like how to use gradients to create a dimensional effect as well as the pattern tool and many more. We will learn how to export these files as well for use on the apple store as well as how to present our icon in a professional way.

It is hard to teach digital design for graphic designers without including a few sections that focus on web design. We will learn what our role is as graphic designers in this space as well as how to prepare and export files for web design projects.

We will learn from scratch Adobe Xd in a quick crash course. We will learn many aspects of strong web design and layout by creating a landing page together, step by step. We will even learn how to link our various pages to create a working prototype and learn some ways of how to export our files to the web developer. 

Finally, we will conquer a basic front page website design for a travel company using Wordpress. We will learn the very basic of Wordpress and learn the very popular page building plug-in for Wordpress called Elementor to build out our webpage using video backgrounds, parallax images, icons, columns animated text and more! We use only the free version of Elementor so not purchases are bestiary to work through this course 

Lastly, there are tons of downloadable resources in this class including pre-made templates for most of the projects. This includes Photoshop e-book, YouTube and social media templates and an icon set and app store icon template in Adobe Illustrator.

This course is not for those students who have never been in Adobe Photoshop and Illustrator before but this class is general enough for most beginner level graphic designers who are interested in adding to their skillset. For those who have never opened the Adobe software before I suggest taking the Graphic Design Masterclass to get a leg up on the basic tools.

This course assumes you have very basic working knowledge of Adobe Photoshop and illustrator and tools like Wordpress, Adobe Xd, Elementor page builder and more are taught from scratch so no prior experience is necessary.

So are you ready to up your design game and add a whole new skillset to your offerings? Are you ready to explore this essential side of design? See you in the first lesson! 

Transcripts

1. Course Preview - NEW: the future of design is digital. This'll course was designed to get graphic designers up to speed on the latest and greatest digitally focus projects so they can expand their skill set and offer more services. This course is massive covering so many digital design projects from social media, I can design Web design and more. First of all, we cover digital design theory, learning the different aspects of designing for digital like creating powerful social media campaigns, website designs, layout for digital and even talking about accessibility in digital design. Next, we conquer several popular digital design projects, including creating several YouTube thumbnails that drive users to click through. We even create an entire social media campaign and talk about how to design for Facebook instagram. We even talk about creating display ads for websites so you can feel comfortable expanding your skill set to all types of digital ad creation. Have you always wanted to know how to create a compelling E book cover? Will do just that and learn how to design a book covers. We talk about sizing, exporting and how to create a design that grabs the viewers. Attention will go over how to take hand written typography and bring that into Photoshopped to use on our e book cover and also learn how to work with other sketching APS like Procreate to bring hand written assets toe life. We also create our own mock up to display our final design. Do you like to sketch or illustrate? I even created a step by step project where we take a pencil sketch and digitize it using Adobe Illustrator's pen tool. Knowing how to digitize sketches is a big part of expanding your skill. Set to the digital arena, Icahn design is at the center of any digital design project. Icons can be used on websites, mobile APS, applications and more. And we'll use a handy provided template as we create an entire cohesive high concept. Or learn how to use grids to create a thematic set and even learn how to add color and how to export all over icons and the right sizes for use everywhere. After creating a simple basic icon, set will go even deeper to create a highly detailed Apple store app icon from scratch. Wilder. Lots of tools like how to use radiance to create a dimensional effect as well as the pattern tools, and many more will learn how to export these files as well for use on the Apple store, as well as how to present our icon in a professional way. It's hard to teach digital design for graphic designers without including a few sections that focus on Web design will learn what our role Zara's graphic designers in the space, as well as how to prepare an export files for the Web design projects we will learn from scratch. Adobe X T and a quick crash course will learn many aspects of strong Web design and layout by creating a landing page together. Step by step. We'll even learn had a link or various pages together to create a working prototype and learn some ways of how to export our files for a Web developer. Finally, we will conquer a basic front page website designed for a travel company. Using WordPress will learn the very basics of WordPress and learn the very popular page building plug in for WordPress called Element, or to build out our Web page, music, video backgrounds, parallax images, icons, columns, animated text and more. Lastly, there are tons of downloadable resource is in this class, including pre made templates for most of the projects. This includes Photoshopped, e book, YouTube, social media templates and an icon set, an APP store icon, template and adobe illustrator. This course is not for students who have never been in Adobe Photo Shopper illustrator before, but this class is general enough and basic enough for most beginner level graphic designers who are interested in adding this to their skill set for those who have never opened Adobe software before, I suggest taking my other basic design class called the Graphic Design Master Class, to get a leg up on those very, very basic tools. This course assumes you have very basic working knowledge of Adobe Photo Shop and illustrator and tools like WordPress, Adobe X'd, the elemental page Builder and Mawr are taught from scratch, so no prior experience is necessary for those. So, are you ready? Toe up your design game and add a whole new skill set to your offerings. Are you ready to explore this? A central site of design. I will see you in the first lesson 2. The Course Guide IMPORTANT!!!!: welcome to the course. I'm so glad you decided to join me for this wonderful digital design journey with me. I wanted to go over a few essential things before we started the course. First of all, downloadable resource is you'll notice a ZIP file attached to this lesson. This contains a lot of the template files will use on projects, as well as several images, videos, local files and other assets that will be useful toe have when creating your own version of each project in the course. And speaking of student projects, there is a student project guide file that will give you more details on the projects who will be tasked with as he worked through the lessons. There's also a downloadable word document that contains all the links to various external resources like photos, helpful links and some of the programs they used throughout the course. And remember, this course does require some very basic working knowledge of photo shop, and illustrator will be helpful to start off this course with some basic tool knowledge. Already, I will not be teaching Adobe Photo Shop and Illustrator from total scratch, although the most of the tools I introduce. I will go over from scratch. I want you to be comfortable with the layering system, the basic layout of the programs and how to find the basic tools. An illustrator. I want you to have used the pin tool a few times before starting this course. No need to have any prior experience in WordPress, the elemental page builder or Adobe X'd, as those programs will be taught from the very beginning. If you do find yourself needing some additional photo shop and illustrator training from the very beginning and need that very basic instruction, I offer a beginner graphic design course called the Graphic Design Masterclass that will get you right up to speed. Taking that course is not required to take this one as long as you have some of that very basic knowledge of Adobe Photo Shop in Illustrator. I want you to take this course at your own pace and feel free to work alongside me, with each project recreating the project step by step, or, if you like watching the lessons and going and trying your own project. That's also welcome to each project has helpful files to get you started creating your own projects to use in a portfolio or to show off your skills. I have an exclusive student Facebook group for those wanting to post projects and engage with others in a friendly, helpful community setting. Simply type in learn design, Go Freelance and the Facebook search bar to locate the group and make sure to answer the questions asked. In addition to the student projects, I also hold monthly student design challenges as well. If you're not on Facebook, I also post these monthly design challenges on my YouTube channel at youtube dot com slash Lindsay Marsh. You can also post your work in the Q and a section of this course. I look forward to seeing what you guys create as you work through this course. This is the most intense of all my courses, simply because the wide variety of project types we work on these projects. Take them one at a time and think of this course as a marathon and not a sprint. This is a great introduction toe. All of these different digital design projects and more intermediate and advanced courses about the topics of love designed, for example, will be coming soon. But this course will at least get you the first step in the process to get you started. I love reviews. So when you get a chance as you work through the pores to leave a review, I read each and everyone I really value what you guys and I look forward to having you as a student. So let's go ahead and get started. I'll see you in the first project. 3. Introduction to Design for Digital: digital design refers to any design that has crafted for the digital space, including mobile devices, tablets, desktop computers, projector screens, large digital billboards and more. Graphic designers have mostly focused on print design projects like business cards, stationary zoo banners, T shirts, hats, package design in the past. But as time moves on, there will be only B'more and more demand for digital based projects. It's up to you as a designer to be well versed in all aspects of digital design, so you can feel comfortable designing for super small screens and super large projection screens, too. All digital design projects are sized using pixels, pixels or squares of light that can either be white, red, green, blue or black. All digital displays are created using a certain area of pixels. Your 10 80 p widescreen TV pictures Air created using a combination of 1920 pixels and with by 10 80 pixels and hype, giving that screen a total of 2,073,600 pixels. That's a lot of pixels that either knew just be switched on to create that high, crisp resolution image. Four case grains using even more unbelievable amount of pixels toe light up the screen with 2160 pixels in height and 38 40 pixels. And whip. I think the most challenging aspect of working with digital design projects as a designer is the wide array of screens we need to be ready to work with. Sometimes they could be smaller as an iPhone eight screen coming in and only 750 pixels wide by 1334 pixels in height. Even smaller still is a mobile display ad coming in at only 300 by 50 pixels. I think the key to being a great digital designer is to understand how to best use small sizes to your advantage. For example, a simple social media campaign. Let's say we have various sizes we need to work with, but we have to somehow communicate some basic information required by the client. As our sizes become smaller and smaller, certain concessions need to be made, and it's up to you to figure this out and communicate with the client. Those concessions, for example, in our social media campaign, we started off with large Facebook post, and then we need to create static display ads display ads or there's little ads you see on websites at the top and sides of a content block or blawg. Some of those display ads can be very small. Smaller still, are these mobile display ads. We have to somehow convince our main concept and theme into smaller areas, but still retain are consistent branding our message and our main concept of the campaign. And we do this by focusing on what is most important in this case. The called action is the most vital part of an ad, and without a reason to click through to the landing page, your website there is no value being created by the ad. It's just static, and this is just social media. There's so many categories and digital design that depend on a graphic designer to develop the graphics. For there is also designing for mobile. This could be mobile, APS or even mobile versions of websites. What colors to use, how to use contrast, what thoughts do I use? All these decisions play big roles in the effectiveness of a mobile app or website. There is also larger format. Digital graphics like the ones you see at your local stadium. Their power point slides for large conferences that need to be made that match the branding of the conference. There's even large format digital billboards, which are becoming more and more favored over the old style printed billboards. Because of the reduced costs of running a digital billboard, icons like the one you see for APP icons on your phone also need to be created. There's a special method for creating those using a special grid created by Apple to help find the most effective placement of elements. Certain icons can be seen better than others and a sea of different app icons. Sometimes the use of color like a red, can help one really stand out in that C or a simple shape or a letter. Also, there are icons that need to be created for APS, websites and applications. There's an art to creating icons that communicate complex actions. Using the most simplified shapes is possible. Icons may only be 50 by 50 pixels and size of any time, so being able to simplify a complex concept is something learned and practiced Icons that will be used as a set together need to have a consistent look and feel. For example, these have a similar stroke size throughout the set, and it doesn't stop there. There's also video based thumbnails that need to be created for YouTube and other platforms . These need to convert and be effective at drawing the user to click through to the video. How you use photos, colors and typography will all contribute to the effectiveness of the video and click through rates. For example, YouTube thumbnails that air simple in nature and have one main focal point tend to do better than those with tons of text and photos. Also, those thumbnails with people's faces tend to convert better with thumbnails with just text . This is because we, as humans tend to connect to human faces and human psychology, can play a big role in digital design. There's also e book covers, and they tend to drive sales based on the effectiveness of the cover design. Sometimes the cover of a book is the only thing of viewer sees when sorting through hundreds of possible book selections and being able to create a digital book cover that will convert and entice and sell. The book can make the difference between good sales and great sales. As you can see, designers have huge roles to play in additional world, and it's our job to make sure we're prepared to create highly effective images quickly that could drive sales for ourselves, our clients and the businesses we work for. 4. Design Theory for Social Media: what goes into designing an image for use on social media? What are things that are known to be effective and drawing those high balls to our content ? There's some basic rules and tips that can help you be more effective. Designer of social media content First of all, understand your target audience. Who are you trying to talk? Teoh? Try to understand the target audience by studying demographic information. Are getting that information for whoever you're working for? Will your poster ad be displayed? Two more women than men? Are you targeting those? And a younger demographic that might shape and mold how you approach the design? An older demographic might need a more conservative design approach, while a younger audience might connect more with something bolder and show stopping. Lastly, where they located geographically, those in the United States might connect more with a certain design than someone from South America or Asia, perhaps using photos that best represent the target audience. More might help in this connection with your ad be authentic and it seems obvious. But being authentic is easier said that done especially in working with clients doing paid advertising. Clients want to push products deals and services. But we need to find ways to create a design that will make thes seem less like your standard offers We see every single day, and they make a more compelling toe. Our target audience. For example, we can create a simple ad for a pet food company and place a bag of food right in the center of the social media ad with a simple coupon. It seems very traditional, but, well, what if we used an image of a pet owner enjoying their dog and then the photo of a product ? Better still, what if we connected with them using a clever headline as well? These are small little tweaks and changes toe ads, but they can have a big impact on how effective the ad is use. Contrast well, and we talk about contrast in almost every lesson of this class. Contrast is the simple difference between to design elements. The more dramatic the difference, the higher contrast it has. We can use contrast effectively as designers to draw the user's eyes into the most important part of the ad, usually the call to action, or that by now swipe up for more button or area. But we can also use contrast with our type by highlighting one word in our headline to bring out a more favorable word that helps to push people toward our main goal for the ad. For example, this ad that uses contrast to bring this word in the headline to draw the user into the overall concept of the ad contrast can be easily over used to many elements that differ dramatically can cause an ad toe look busy, outdated and very hard to look at contrast is best use sparingly and with a purpose. Use photos that connect with the viewer. This goes back to being authentic as well. The photos would choose could have huge impacts on drawing the viewers in. And this is true for traditional print ads as well. Take, for instance, this ad for a gym we can use the standard photo that is easily glanced over where we can use a higher impact image to draw those viewers in and stop even just for one second to take an extra look at the photo and the ad. Full color photos tend to draw users and more than black and white remember in social media . You have the least time available to draw people into your poster. Add the least amount of any other advertising platform. Think about how fast you scroll through your instagram feed. Not a lot of time, is it photos of the first thing people see and they start to read the text. Next, use this to your advantage. How you crop. Your image is huge as well. We can make things look ordinary or dramatic simply by cropping it in the most compelling ways in this example of the girl in an exotic location. Cropping it this way. It looks nice, but crop this way. It seems almost magical and inspiring. Feel free to edit your photos as well. To add pops of color, you can do this easily, be by adding new layers to the photos and photo shop or a photo editor and using blending modes to draw out color to make sunsets. And more dramatic, I've even seen people clone in different clouds to really set the scene. But please be careful with being authentic as well. Because famous social media influencers have gotten in trouble for adding and fake clouds or photo shopping, their bodies. There's a fine line, and it's up to you to decide where that line falls for you and your viewers. Whatever you do, just make sure you're telling a true, believable, authentic story. Use variety. Think of your social media post and campaigns as a tapestry of art. There needs to be some brand consistency throughout everything, but that does not mean you need to create cookie. Cutter adds that all have the same format. Some people enjoy seeing different photos being used headlines, arrangements and style. This is great for user testing to figure out what is the best layout and effectiveness for different types of ads. Social Media is a growing part of a designer skill set and knowing how the best designed for social media can make you more marketable as a designer. Overall, this takes a lot of practice and user testing 5. Design Theory for the Web: now what makes a great Web design all websites ethical? That could be to convert users over to a subscription service, purchase a product for just provide helpful information to the user. A great website is one that converts its viewers well. This could be through the use of consistent branding, authenticity and well written copy effective product photos and more. So what's your role is a graphic designer in the world of Web design? Well, if you can develop in code a website, you're a rare breed and you will be paid handsomely. But with website design becoming more and more complex and coding, becoming more specialized and might not be a bad thing to have our different specialties, I see Web design being the responsibility of three main contributors. First of all, there's the developer. He will take the final design and turn it into a coded, riel workable stuff. He requires knowledge of front end and back end coding languages, server side languages and mawr. Ah, highly specialized individual. He focuses in on the technical side of things. How does it work? And newly added to the group in the last 10 years is the UX designer or user experience designer. A lot of graphic designers start to learn this field of design, and it's growing in popularity. The UX designer will do a lot of the user testing and user research to find out the order of how the user needs to move through the website. This means they will map out a user journey so you know how many main menu options there needs to be for the user and how many steps in each process to get the user to their in goal. This requires a Thanh of research and something called wire framing. Wire framing is away for a UX designer to map out the flow of a website and block out areas where a button may need to go. Ah, photo or where options may lie for the user. This rarely includes final graphics and can sometimes just be great out boxes. So what about the cool visuals, the branding, the colors? This is where the graphic designer are you. I, user interface designer, could come in and really flesh out the visual details. Once you have the basic outline site map framework, it's your job to create icons style guides, some basic layout ideas so the developer can code this and make it a really polished reality. So now that we know our role, how do I create an effective website design or mobile app design? And there's some basic ideas to keep in mind using contrast. And here we are talking about contrast yet again. Contrast is a great way to lead the user on a journey toward their desired destination. This could be toward a shopping cart we can use red, which would be a higher contrast color here among the sea of white. To have the user easily find the shopping cart, making their experience easier. You size to your advantage. What do you think? Converts better in this e commerce store layout, a product feature that has a small photo or one that has a larger photo. The larger photo naturally converts better because it gives the viewer a better idea of the product that they're getting ready to click onto. What do you think works better? 12 items listed on one screen or a selected three curated items. The items have a larger feature, tend to do better. People get overwhelmed with too many options when you were fined those options for the viewer. It tends to reduce this emotional tension, making it easier to select an option. Overall, this is why people enjoy curated content like news. There's hundreds of news articles. We can read it any given time. But using size to highlight the most important ones does wonder for our soul in our minds and our conversion and click through rates clean and simple. It's the name of the game. Let's talk a little bit about clean design and Web and mobile design. What do you think works better, The layout on the left or the layout on the right? Simplifying the design can help the user feel less overwhelmed, just like it did when we gave them More. Selective options based on size have a sense of hierarchy. Do not feel you have to cram everything into one area. They'll be certain items that will beam or important than others. For example, certain products sell better and will be a top priority. Hierarchy can be applied to mobile and Web design in several ways. You have type hierarchy, which could be defined by establishing a font size and wait for your main largest headline type and then you slowly working your way down to smaller headlines. This usually is indicated by the term H one for the largest and going down to H two h three , h four and so on for smaller headline sizes. Then you have your main body copy or your paragraph size type, which is usually a simple font, a normal weight and a little bit smaller compared to the headline sizes. Your job is a designer is to establish and set this sense of hierarchy in the design. Take this example. The example on the right does not really use type are key items or similar sizes, and they have almost zero contrast. But the example on the left establishes a strong type hierarchy system, which uses varying styles for certain types of information, headlines and sub lines, giving the design and orderly feeling. We could do the same thing with print design, and it translates well to the Web. Font choices are everything not just important in Web design, but all design projects find choices are everything. Larger fought sizes can have huge impact on landing pages to drive sales are to drive an action or emotional response. Pontes that are too small in size can impact readability and effectiveness. The best practice for choosing fonts for your digital project is to keep it a simple and orderly as possible. You want to make sure your font choices check all of the boxes at all times. Number one. It's readable at the final size. A font used on a desktop website can look nice and big and readable. But when it shrinks down to the mobile version of the website, is it still readable and doesn't retain the same impact? Number two. You're not using too many different fonts. Try to avoid using more than three fonts on one Web page or digital graphic, unless there's a specific creative design reason. To do so. Avoid using similar font types, like using Helvetica close to Ariel. They're both very similar in a period appearance, and they're both sans serif typefaces, confusing the viewer of which one is which. Lastly, make sure it's easy to read by keeping the line length reasonable. Which column of information is easier for you to read The version on the left are the version on the right. The right is most likely easier to read because the total length our line length of the type is easier for eyes to read. The same applies to print projects. You want to be able to keep your line length no longer than 60 characters per line. You can use columns and photos to help make this more possible for you. Do not be afraid of being expressive with your typography and digital design. We use the default typefaces like Helvetica for Danna an aerial because they were Web safe and everyone's devices had these preinstalled. Nowadays we can store fonts on the cloud. For example, Google Fonts keeps all of their fonts on the cloud so you can load a bigger variety of fonts now. And people don't have to have them installed other computers to see them in their browsers . This has opened up a world of expressive creative typography on the Web. Now we no longer have to use pictures to show expressive typefaces or typography. We could make it live type, meaning people can select it, copy it, interact with it and sometimes you can even make it move. As designers, we could be Justus, creative as we are with print projects with digital projects. Make sure to experiment with interesting typography for your headlines. San Serif typefaces tend to rule the day of the past, but now you're seeing more and more detailed sehr of typefaces and even script typefaces live on digital interfaces. The only warning here is to make sure you do not overuse expressive and detailed typography too often in your digital design. They could have be great attention grabbing headlines, but avoid using too many custom unique fonts for smaller areas of texture, copy and paragraphs. It's best to keep those really expressive, beautiful typefaces at maximum readability, making them larger in using them for headlines. Study popular and emerging new ways of displaying information there so many emerging ways to display a menu. What was popular before was the hamburger menu in the mobile app or website design. It's a simple icon, which expanded out a sliding menu. This was nice and provided the user with easy access to a menu without taking up too much space on the top oven app screen. But with phones getting much, much larger, the user now has to take their figure go all the way up to the top of their phone to access this hamburger menu. Now shelf menus at the bottom tend to be preferred by users. These small evolutions and you I or user interface design of a mobile app, for instance, are little things you need to be aware of. If you are interested in perfecting digital design, we need to start thinking about Mobile first. Not long ago, we thought about the desktop version of a website, and then we figured out how it would best adapt to a smaller mobile screen. Well, times have changed, and now we need to switch that mentality around. A good standard way to design now is to design at smaller sizes first and then work your way up to larger sizes. So, for example, starting off with a mobile version of a website, and then you need to figure out how will it expand when it's on a browser on a tablet? And then, finally, you want to see how it looks on a larger desktop screen. The same applies to email newsletters. How you view an email on your iPhone email application, for example, looks a lot different than how you view that email on your desktop. The images air much smaller than you expect when viewed on your phone. And it's the best practice to keep that in mind when creating any digital design image. And this leads into responsive design. What is responsive design? It's simply how website responds when it shown at different browser sizes. Sometimes elements collapsed to make it easier to see on a mobile device. Sometimes elements are not shown on a mobile device when it's converted to a smaller size, like a photo, for example. These choices are all important for you to understand when designing for both larger and smaller sizes and something you and your developer consort out as a team. 6. Design for Accessibility : we need to think about accessibility to those viewers with special needs. This is way more important than you realize, and something you can make sure happens for anything you design for. The Web or mobile device is thinking about the color blind When creating your color palettes. Think about those who may be color blind. Do not rely totally on color to communicate the next step or call to action. But for example, this is why we have two buttons here. If we were to add other indicators that this button is important to press, like thickening up the tight base are adding a special border. It could be another indicator to help the user who may not see that bright red color. No, it's the next thing to do. A good trick to see if this works is make your design totally black and white for a time to see if you can navigate your website as just black and white, just as you would if it was a full color version. We also need to think about the visually impaired. The same goes for making sure there's enough contrast with your colors and elements. Low contrast, maybe harder for those with visual impairments to see and navigate your website. Designing forms is a good example. A 1,000,000. Sure you have enough contrast in your design when we like to save space whenever possible. Sometimes we put the label or name into the input bubble. For contrast reasons, it's easier to read if the label is placed on top or outside of the bubble. The next item is something that maybe more for the developer or the coder, but making sure your images have alternate descriptions or alternative descriptions so that their audible Web reader could be able to speak the description of what the photo is. So they do not miss out on the impact of the visuals. Another one to think about is also make sure you can navigate your website using just one hand, for example, making sure you can use the tab button to move through your website. Just using a keyboard. If they're on a phone, make sure buttons and actions are not too far apart from each other. For example, the menu system can be used access to using one hand or one figure because it's at the bottom of the screen There's also the hearing impaired. If you use any kind of visuals or video, make sure captions are available. Also, make sure audio is not a required experience in your designer digital experience. With special exceptions, of course, there is so much more he could do to make accessible digital design experiences for user. And it's great to keep these in mind. Make sure your code or developer is brought into these discussions early on so they can implement a lot of these. 7. Effective Digital Layout Theory: We talked about several aspects to think about when designing for social media websites. Mobile experiences more. But what about static digital layouts like email campaigns, digital billboards, icons, power point slides? Any book covers all of these different items. Catch the user in a different situation. Digital billboards catch people driving fast of their cars and their distracted with a very limited focus. And the key to a solid digital billboard design and print billboards is to make something readable in five seconds. You can use simple backgrounds and graphics to make this process quick and easy for them. Avoid numbers. Not many people can write down phone numbers while they're driving, but they can remember a simple your l or website. What about E book covers? Have you tried to find an e book on Amazon lately? Do you know how many different book covers you looked at when trying to find a book? I suggest visiting amazon dot com and looking at the books or e books. Notice how quickly you scroll through these covers, which covers catch your eye yellow bright covers, ones with a compelling photo. We have to keep in mind where and how the viewer will first viewer book cover complex themes air hard to digest like they are when you can physically pick up a book at the bookstore, so digital covers tend to be more simple in nature. Are you noticing a theme with simplicity with digital design projects? I sure am. You have to think about your viewer situation for each different digital project. For example, email campaigns. They can see this on their desktop computer and see a nice, big high resolution image. And that same email could be viewed on their mobile browser in the image is tiny and has a low impact. If it's too busy, we have to put ourselves in the viewer shoes and test out our designs and different situations. Print design seems easy now, as there's just one final printed form to worry about. But with digital design, there's a mind shift that has to happen. We have to think about the many different devices people will fear your content on. I have a little task for you. Study your in box this month. Keep an eye out for email campaigns that grab your attention, not just the graphic, but think about the whole thing. Even the subject line of the email to sometimes graphics and arrows and even emojis can help it stand out in your inbox. As annoying as sometimes they seem, they are effective. What about a campaign drives you to click through what is the main goal of any email campaign? It's driving users to that one goal that could be to purchase a product or to get people excited about a upcoming service announcement. The ones I find most effective simplify the message as much as possible. Instead of talking about two made activities or two main events like email newsletter, would they tend to be hyper focused on that one user goal? They use one single image up top and very little body copier text, but a large click through button or a large called action clients. Sometimes, once you talk about one big thing, but they tend to want you toe also squeeze in a bunch of things already because you're sending out an email to all their contacts. They want to be efficient, but emails that convert the best have a single focus. Try to educate the client on this fact and practice it in our own campaign designs. Newsletters are a little bit different, and that's when he could be more elaborate with information. And this is with all things designed but be consistent with your branding and having connected digital campaigns. Also, with all over digital projects, we need to maintain that prank consistency. You do not need to have each digital template be a cookie cutter, but make sure to use similar colors throughout your campaigns as viewers may see your campaign in different places, slowly leading them to a funnel that will convert them over to a sale. For example, they could run across a Facebook ad. They sign up for more information, and then they receive an email campaign. They could also see a display ad on a news website and then click over to a landing page. And then they click off. But then they're retargeted by a social media campaign on Instagram. Having consistent branding and colors can help them recognize the trail and further than down the process of the sales funnel. I wanted to make sure to mention grids what is great about digital design projects, as they could be similar in nature to print design projects and the fact that they both can use the grid system to their benefit. Rids air fantastic guides that help us block out important content and her design. They can help us find the right placement of a face of the main part of a logo and a social media designed. For example, they could provide guidance toe working with complex Web layouts and mobile APP layouts. When you're dealing with digital products, you're also dealing with pixels. Sometimes it's nice to have a grid to know your margins of the same width. On all sides are the gutters between the columns of a website or even are. The buttons on a mobile app are lined up with similar spacing and alignment. There are a lot of different grid systems you can use in Detroit products. For example, mobile website layout has a standard four column grid, but a website can have a standard 12 Gullit column grid that can help you find the right spacing between photos, columns and mawr. With AP icon Design Apple created this wonderful grid based on the principles of the golden ratio. It helps us find out proper placement of elements to create compelling. Easy to find app icons If used correctly, you can use a boxer modular grid to help you block out An email campaign are an e book cover to help you strike a balance between design elements. There's a lot to think about when designing digital projects, but in the end, some of the same basic design foundations, like proper typography, photo and layout ring true in the digital space is well. We have added elements toe worry about now, like viewing size of a screen, the distance to a screen screen resolution and how type is rendered on the screen. But in the end, it's those basic design principles can that can help you create compelling digital projects . Now we took some time to go deeper into strong digital design theory. Let's tackle a lot of projects that are considered a big part of the digital design space, like social media campaigns, YouTube, thumbnails, e book covers, email campaigns, a mobile website, layout icon, design app, icon design, instagram post who and more. So let's go ahead and get started with some practical application 8. YouTube Thumbnail Project: Welcome to Adobe Photo Shop. We're gonna be doing for our first project, a YouTube thumbnail. So as you know, we talked about a little bit about this in the theory sections, but YouTube dubbed nails. And to be simple, not very complex, but a very, very attention grabbing. This is when we use really high contrast colors. We use people shots. We use different things to really help grab people's attention on that very, very tiny thumbnail. And anyone who's on YouTube or works for somebody on YouTube or wants to have a client where they work for and do you tube thumbnails as part of your job? You'll realize just how important it is to do these attention grabbing thumbnails and do him in a way that makes a compelling graphic. So we're gonna do this example right here. We have a few YouTube thumbnails were gonna do in this section. We're gonna walk work on this 1st 1 first, and it requires just three images. I grabbed all of my images from pecs als dot com. There's also unspool ash and a couple of other ones picks obey, but I'm gonna be using these images and feel free, since this is more starting to get into intermediate level to use your own photos in a similar manner, but putting your own spin on it so you don't have to use these photos. But if you want a link to them, they're in the resource guide. We're only gonna use to images for this 1st 1 It's mostly going to be a focus on the typography. Which is kind of a big headline is giving away $10,000 in 24 hours. A very short headline notice. We're not putting the entire title of the video, and there were just really selecting what's gonna grab people's attention. This will give us a chance to really make the typography high impact and larger and really pair well together with the main photo. So here's gonna be our main photo. This is our YouTube guy. Who's of course, I made up fictitious YouTuber. So I got this on pixels, but we're gonna use him as our fictitious YouTube guys gonna be giving away being very generous and giving away $10,000. So first we need to kind of isolate and this is an intermediate class, so I'm gonna kind of go over more intermediate level stuff. So we need to isolate this character. So are we need to isolate this person. So there's a couple tricks. I am using Photoshopped 2020 when I'm filming right now. So there's a couple of cheats that we can dio We could just go to select a subject that is the quickest way I always go to that. This came out in 2019 versions, so if you have a 2018 or prior, you're not gonna be able to have that. But look how beautifully that cut that out that saves so much time. Another reason went upgrading your software's not a bad idea. When you start to do intermediate level projects and paid client work, it pays for itself. So we have this man isolated. What I can do is there's a couple things I could just do a copy and paste, and I have this man right here. We could bring him in into the other area, or we can do a glaring mask. So it's gonna playa layering master right down here, and that does a little bit better job. What I love about layering Mass is I can go in and I can release the layering mask so I could right click and disabled my layering mask, and I'll be able to get my original photo back. So I like being able to do this. It's called nondestructive editing for those who already know or for those who don't know. So I can right click, and I can enable the layer mask again to get my crop, and they're gonna be cropping a lot of things using layering mask instead of just copying and pasting, because I feel like I never want to go back to something When I used layering mass. I can always go back to the original photo, and that's what's so great about it. Really, Saves are your time when you do other steps, that's one way to cut him out. Of course, if you didn't have the new version, you'll probably end up doing for this one. The background is simple enough where I could just do the magic wand, tool and select or even better, I can get the quick selection tool and increase the size of my brush for quick selection tool and just do that and then I have to go back and hand. Select that or use the pick tool. Lots of different ways to catapult objects were definitely be practicing all those later in the course, so let's keep it simple. Let's keep this quick. Well, let's go ahead and right click in an able or layered mass that we made. And let's bring him in to our template so you can access this template. It's a downloadable resource is a part of this class. Each project will have some sort of template that you could open and use, so things are already size the way you need Teoh and you can start designing. But to do this I just did a 12 80 by 7 20 pixel document, and I went ahead and created it in 300 dp. I resolution because I feel like when I do digital images, especially on YouTube and Facebook with social media, it's better to design and that higher resolution format. Then it is a lower one because you never know when you might need to use the graphics or something slightly bigger, and they always downsize the file size for you if they need to. So not a big deal with file size here because they do all that for you automatically with the server. So I like to keep things in the higher resolution than some. That's why I'm doing a nice 300 resolution. A red border. This is just have a border on almost all projects. Just so I don't keep things close to the edge. This is not mandatory by YouTube, but this is mandatory by me because I like to keep things nice and clean on the borders. No type or text on the red border. But you can have photos bleed out to it. Just don't include important eyes or elements. You don't want to put that so close to the edge. It feels anxious. That's just a helpful design practice to keep things within the margin. Okay, so here's our template. I'm gonna go ahead and get our layers panel out here. You can have your windows arranging anyway. Don't have to copy my window system, but just do the ones I just use in my own personal workflow. And at the intermediate level, you're starting to figure out what kind of dashboard do I want, what windows do I wanna have open so you you could start to personalize your own dashboard . So here's the three layers we have. We have a text layer. Would you go and toggle that off? We don't really need that for right now. And we have our margin, which were to keep on for just a little longer. And we have these guides which I have my rulers on. So if you don't have your rulers on and we're gonna really need our rulers here on, we do Social Media Post just go up to view and then have have your extra showing If you want the guides to be on and your rulers, if you want the rulers to be on, of course, you can click and drag from your rulers to create your own guide. Just click over here and drag to be able to create those. So let's bring in our man here looking drag before I reduce him in size. I'm gonna do something a little special. I Right now he is not a smart layer, and I'd like to make him a smart layer because when I if he's not a smart layer and I reduce him in size, and then I make them bigger again. I decided to make a bigger again for some other reason. It'll pixel ate, but if I make it a smart layer, it'll keep that original resolution of the photo intact at all times. So when you're working with photos, if you can keep it in smart layers as long as you can, sometimes you have to. Rass tries to edit a photo in depth. But if you could go ahead and right click and make it a smart layer over here on the right side of this layer into the right, click and get a goat and convert to smart object. So now this is gonna become a smart objects that can tell by that little, uh, icon right there. We're gonna do this to almost all photos until we need to Rast arise them to edit them. So right now I can reduce the size of him. I could make him really tiny and what's great. If he wasn't a smart object and I made them bigger, it would blur. But now he's keeping the resolution even when I make him larger or smaller, so that's just so helpful in terms of workflow and having a nondestructive editing atmosphere. So let's position him in the proper manner. We don't want to have them so big that he's just like, Wow, he's out there, man. It's nice to have some neck and some shoulders, but we also don't want to zoom out. We start to lose that emotional impact. So when you zoom out like this, you're really starting. You're not connecting with his face and his eyes as much, and he already has sunglasses on, which is a little bit of an emotional barrier. So you want to kind of zoom in a little bit more than this, so you can. I want to have this nice halfway point where he is. You're zooming in your connecting with this face, but it's not overwhelming either, and you have a lot of room for text. Go ahead and crop time here. From now, we can always arranged later, so let's go ahead and apply a nice high contrast background. So we're gonna do a nice, dark rich color. It's gonna do our swatches. Let's see if we can't do a purplish blue color. We just gotta go into my swatches and get my paint bucket tool Just making a new layer and just gonna go ahead of pop in a new layer and bring him down. So this is where I'm gonna toggle off margins just so I can clear up everything for me. I'm also going to toggle off my extras, which will be my guides don't need. There's also a keyboard shortcut for that too. I just need a clear picture for right now. Let's go and add in our type. So what is a nice complimentary color to blue? What has the highest contrast color you can think of to blue? If you look at the color wheel yellow, that's gonna pop out as much as possible. So that's what exactly what we're gonna uses this blue and yellow combination for the most high contrast high impact colors. So you don't want to use this for everything and design. But for YouTube, it is all about attention. It's all about grabbing your attention, so we're gonna use it here. So let's select a nice yellow color which wouldn't go into our swatches and yellows. All sorts of things we can do here. Let's get our typography. I'm just gonna go ahead and load it in and I am using. Right now it's a type or it's a font called fieldwork, and it is in the dhobi font. So if you have the adobe subscription, you have access to the spot for free. Feel free to use another free, open source type face that you get from Google fonts. Google Fonts has one called railway, which is very close. So if you don't have the adobe subscription, feel free to go to Google fonts and use railway or another simple sand Sarah typeface. So I'm gonna go ahead and load these in. This is gonna be simple. Copy and paste. I'm gonna put each line on its own type player. 9. YouTube Thumbnail Project - 2: So I'm gonna go ahead and break this up a little bit more. I want to have it be a stacked typography. So what I might even do is just kind of cut this away, create a new text layer. And there's have this as a separate words that this is where we need to really think about How do we work with our typefaces? How do we kind of arrange them in different ways? So giving away, Let's see if we can't put that on stacked when I might do Is the lower case look soft? And I like that. But we really want to have this high impact emotional. I'm giving away $10,000 in 24 hours. So let's do an upper case. All uppercase are all capital letters. I'm gonna go down here to my character panel and just go ahead and do it all cap and I had to go ahead and do that for these two. So Well, at least we're starting to make some headway in terms of how we want arrange it. So let's do giving away. We want to make sure things are tight as one headline, but we don't want it to be too tight because that's overwhelming. But when I have it tight enough where it feels like it's one headliner phrase and so with the in 24 hours, we could make this all uppercase is well, but then it starts toe run into each other and be a feel like a much longer headline. So I'm actually going to make the decision to make that keep that lower case and a little bit smaller and maybe do kind of a different alignment. So just kind of blocking out or typography just like we do with a lot of other projects. And so this is where we go, OK, we need to break this headline up because there's four lines and it's all screaming at me. It's all a little bit too anxious. I mean, it's almost too high contrast, So one thing we can do is we can use contrast with their color and type. So one thing I might do is go ahead and make this white who just making that type white and then the $10,000 really stands out. So you notice how that headline automatically reads a little bit better. It breaks it in half. So giving away pause $10,000 in 24 hours. Just because we change the color, it really helps to make it a little bit less overwhelming. But also it helps it read better because it's broken up. So using contrast with size weight, this is kind of one of those factors in action. It's one thing that's really popular to do is to layer type and photos. So one thing we can do is bring all of this type. Make sure it's below Are layer kind of see if we can't find an opportunity to have a letter or to go behind them just to add the layered look a little bit? It doesn't have to be all the letters because that would make it hard to read. But maybe the G G is a very strong letter, and most of the impact or the readability of the G is on the right side of the G. So I think we can afford to have a little bit covered and then we can just kind of alive this as such. And one thing I like to do is have some alignment. So if I don't have a lineman on the left. I wanna have it on the right so we can go ahead and make that a little bit bigger so that right side these letters are aligned. And then we could even do the 10,000 that way to Aiken Select all three of these just going to do a right alignment. Just make sure everything is the line to the right, and this is when we need to pop in our margins and go OK. Are we going over the margins? You can a little bit. It's OK. It's not. It's not a rule. It's just to help Helpful guide. So you can keep it like this, or I'm gonna see if I can't pull these things away from the margin slightly so it stays in and then you talk. We can also use grids to lose grids a lot in this course later on. So we're getting the basic layout. We need to have some kind of background because right now it's a solid color. It stands out, it doesn't job, but what can we do to make this even more of an intriguing photo? There's a lot of things we can do. So we're giving away money on what entices people about money seeing it right? But let's not make it be totally overwhelming. Let's make a nice background element with dollar bills. So I have this banknote and we're gonna use this photo right here, and I'm gonna bring it into the background. It's gonna paste it in and I'm gonna right click, and I'm gonna make sure I create a smart object. So when I reducing in size and bring it back bigger, it will not get blurry or have the resolution reduced the only issue and this is just a practical issue when you make something a smart object is, it does retain that resolution, which is what you want, but it makes the file size super huge. So if you don't have a new computer, sometimes having 10 smart objects that are photos can really slow down your computer. That's the only downside is it does increase your file size of your Photoshopped document. So let's frame this. Go ahead and bring her layer all the way back. I was trying to frame this. We want to have the one be visible so people could tell That's a dollar and we need to screen this back so we could just reduce the opacity and, you know, that's okay. Let's try to do a blending mode and we're gonna use blending loads. Also a lot. This course, let's try to find one that blends it that also keeps that rich blue to it. So we're just gonna go through these and find what we think would be the best. That's that overlay has a nice modern gun, almost gives it a purplish kind of tone, which is very modern, just kind of cycling through these to find one. We're going to stick with overlay for the blending mode for this, and I want to kind of tweak the background a little bit right now. Um, I just want to kind of add a little more purple to it. It was kind of adding a little more purplish to that. So what we can do is right now we have the background interfering with the type. We can add a drop shadow or we can keep it clean and just slowly kind of reduced the transparency, that background and just the areas where it overlaps the type. So Let's do that using wearing masks. So I have art Dollar selected it. I'm gonna add a layering mask to do this a lot in the class. So on the layering mask, I'm going to paint with the paintbrush. And with most layering mass when I erase or add to the layering mask, I like to paint with a soft round brush. Ah, hard round. It's just a little unrealistic software and gives that nice feathered look. So I'm using a soft round brush usually like to use a nice big brush to have more of a realistic fading. And we're gonna paint is if you don't know this yet. If you have a layering mascot, have the layering mass elected, not the main layer. So the layering mask When you use black, you can paint away an object. So I'm gonna paint away this wherever I paint black on the layering mask and you can see the layering Maskell right here where I paint at the black, and I can gain it back by switching it toe white and painting back so you could gain it back by white and then erasing it is our eliminating. It is the black. So we're gonna do that here with the black where you're gonna reduce the transparency of our soft brush and just kind of subtly get rid of some of that background so it doesn't compete with the type. We don't want to do that. The last thing we want to do, we could even faded a little bit here toward the bottom. So you really, really focus on the type Mrs More of a background element. So one thing we can do here is we can add a pop of color. So right now, we just have a solid color background. But what's really popular now is having that solid color background but adding a rich blending mode or color on top of it. So we're gonna add a new layer, and this is gonna be a layer on top of everything. So we're gonna add a new layer, and we're gonna keep get that same soft round brush. We're gonna make it quite big. So let's make it pretty big. Try 1000 or so. That's probably good. And here's what we're going to do. We're gonna paint on a little bit of warmth right now. We have a lot of cool going on. We have a lot of purples and blues. What if we do this Almost sunset, kind of. I've on the upper left hand side, so I have our new blank layer selected, and I'm just gonna call this highlight and I am just gonna click. I could go ahead and select a nice warm sunset color. He could do orange. You do kind of a pinkish color and let's go ahead and just click once. And right now it's really strong, and that's okay, cause that's what blending modes or four. We're gonna do the overlay or the lighten 11 of those to see what looks better. There's overlay but almost makes the skin look a little to read. So let's try the lighten So the lightning's gonna have this nice, almost an instagram filter tape effect to this, And this is exactly how Instagram filters are created is by using blending modes and colors on top of things. Click again once, but we don't wanna overdo it. We just want to add a little pop of warmth over there. We could also do it to his sunglasses, So if we want to kind of reduce this a little bit. We could not add a little bit of sunset color to sunglasses. Warm those up a little bit. Of course, if I had this on a separate layer, Aiken just toggle that off in a one and reduce the opacity. If I think it's too strong, lots of things we could do so that is before looks great. But this adds a little richness to it. And we're gonna do this a lot when it comes to photography and bringing out sunsets, mawr and doing some things like that later on, we can't add a little bit of a drop shadow. It's not gonna kill us. I'm not a big fan of strong drop shadows. I like very light drop shadows. So let's say I want to add drop shadows to all of the So the quickest way to do that from workflow perspective. Let's go ahead and add it, how I like it on the 1st 1 So I'm just in my layer style panel, and I'm just gonna kind of had a really nice look. How little are moving the handles on those Just a really nice small drop shadow. I'm gonna say this as a style. So I'm gonna say this over here. New style. Look out here and I'm gonna say this. It has dropped shadow YouTube and I'm gonna include layer affects. Don't have to clue blending options because I'm not using it. Look OK now to be able to access that, I could go over to my style's panel right here of my style's panel, and you scroll down to wear mine will be loaded, and I can select all of these and apply the same drop shadow. So it's just kind of a time saver. If I want to add a drop shadow to everything, and I don't feel like going to each layer and adding the same drop shadow. You can use character styles to easily speed up that workflow. And that's exactly what this class is about is improving and speeding up your workflow and finding ways to do things faster and better. 10. YouTube Thumbnail Project - 3: So let's add some finishing touches. We can add a little drop shadow to make sure that his head kind of cast a little shadow on the G, used to add a little bit of that layered effect. Just doing a simple drop shadow and let's bring out the distance and I'm gonna unclip you school little light because I don't want my other drop shot is affected. So I'm just I'm clicking that and finding the right angle of where it's cast right about there would be perfect. Very spiral drop shadow. Not a lot of capacity. Just enough to give it a little bit of that layered look. Little richness. And lastly, there's a couple things we need to do. First of all, we need to do a visibility test, so visible ability tests zooming out quite a bit. So let's do 50% and this is kind of a realistic way to frame your stuff because you want to do visibility tests. You can kind of get a realistic picture of how the viewer is going to see your digital document. So right now this is probably a realistic saw thumbnail size that you'll see on a desktop screen and we could zoom out even Mawr to do a visit. Ability test. So can I read it? Yes, the the type is very clear. I could see the man's eyeglasses. I could make out the dollar signs and you could do one more step and go to 25% and go. Can I still read it? If the thumbnail was smaller, can I still read it? Yes, I can. It checks all the boxes so it passes all my tests, So I'm ready to get a little bit more serious about getting ready to export it. It's been about 20 minutes, and that's about the time you want to be able to do a YouTube thumbnail in its take any more than 20 minutes. You gotta find ways to speed up your process of getting things together because we want to be fast, efficient and do good work. So that's what intermediate to advanced designer needs to start doing is moving fast and getting ideas popping out so that you can charge, you know, for your hour of work for a thumbnail and not overcharge and take five hours to do what should be done very quickly for video. So right now we have this rich, colorful background. We have this rich, high contrast yellow white type going on. One thing we can do is as a lot of you two people do. This is they'll they'll make their photo or the main photo grayscale so that the typography has a chance to really come out. We're gonna try that. Here we have our layer here. We're going to go up and see if we can't make this black and white. So I'm just gonna go down and you'll notice when you have a smart layer on or a smart object on a photo. It's great for sizing it. But when you need to do edits, it does make it a little bit difficult is when I go its image. I can still make it gray skill by going to black and white. But I lose a little bit of my de saturating a couple of different options. If you want to have those options, you're gonna have to rast arise it to get a right click and you're gonna have to rast arise the layer. That doesn't mean you can't You don't have the ability to scale it up and down like you did before. I mean, you still can, but it starts to lose its quality and its its everything. But that's just kind of I think I could still make it black and white without having to do anything. I could just be saturated a couple different ways. I'm gonna go to the black and white option and just do it there. So you noticed that kind of tone down him and brought up the 10,000 the yellow in the 10,000 so you can have it full color. You could have a black and white. I'm gonna click on this man, and I'm gonna sharpen him just a little bit. So I'm just going down and going to sharpen and just get a sharp in him one notch just to kind of crisp up that image a little bit more. So I think there is one thing we could do to make this even better. So if you have another type of photo, sometimes you're stuck the client or you. If you're doing your own YouTube thumbnails, you're stuck with a particular photo. You only have a some set of photos but as designers were always pushing ourselves to make better and better stuff. So what could make this even Morvan high, High impact, YouTube thumbnail? Well, we all connect with people's faces of faces, air, great to have on their smiling faces. A really good emotional faces like angry faces are really good. Neutral faces or not. But what if we had an even more exaggerated facial expression like yes, like an excitement just like this guy, This guy right here, Look at that face. If we put him on a YouTube thumbnail, it would really grab people quite a bit. Of course, you're limited. Sometimes if you have to use the YouTube channel owner, whoever did the video, but just kind of showing you kind of that emotional psychology behind what photos to choose and what convert better and what. It's more effective and digital design. So let's isolate this guy. Let's see how it can do that. Let's see if we can't do our handy dandy select subject. Let's see what it does. I love this tool. One of the biggest reasons why you should upgrade to 2019 if you can afford it. Some people can't That's okay. We're gonna do the same thing. We are going to just do a layer mask and get him. We could probably crop him a little bit. I'm not gonna need all that sky are. We was getting our crop tool in cropping him and let's go ahead and bring him in. So this is gonna be a second version. We're gonna have two different versions. Let's have two different versions, So I'm gonna go to our art board, Could be right up here. I'm just gonna click on the move tool. And I got my art board tool and I'm gonna be adding an art board, so it's gonna go ahead and click and go ahead and click on the addition. It's gonna add a new art board and I'm gonna copy and paste what we had before, So I want to have two different versions to export. So I could do was called a be split testing. So I can try one image out one thumbnail to see how the video converts, and that I could try the other one out. That's called a be split testing your basically saying which one works the best everything an art board one we could copy over to art board to So I just selected are poor one. And I just copied gonna goto art board, too. And I'm just going to paste, so it looks like it already added an art board for us. So that's one step. Now I know that we don't have to do so. That's nice. So went ahead and copied the art board as well. So now it can work on both of these. So I still have our man jumping Bring him over and let's eliminate our man and our highlight, because we'll just have to see about that later. And let's see if we can't just paste this guy in. And of course we want to, right? Click over here in the layer and make that a smart object convert to smart objects, and now we can move him around, scale him around without issue. So where is going to be? We may need to zoom in for this one. Where is going to be the best way to lay him out with type? So what we want to do and this is just kind of common design psychology is we wanna have eyeballs facing type because as humans, we look at people's eyeballs and we're interested in what they're lookin