Washing out images in Illustrator with coloured background

This lesson is exclusive to members

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Hey there, in this video we're going to do this little image in the background here where it's kind of like a full stretchy background, and it's kind of washed out, it's got a green tone. We'll look at how to do that in Illustrator.

First up, let's bring in our image. Now, there's two ways of bringing it in, we can drag it from our library if we've got in there, or we can go to 'File', 'Place'. Now this will alter how we make it, say black and white. So I'm bringing in the image, I'm dragging it, nice and big. Great. If I do it this way it becomes very easy to convert to black and white, and I'll show you that now, and then we'll look at somebody's other images that are linked to say, your library, they become-- they're not harder, they're just an extra step.

So what we're going to do is, we're going to crop it in where we need it. Actually let's make a black and white first before we go and crop it into the square in the background. To do it, it's quite easy, have it selected and go to 'Edit', 'Edit Colors', and 'Convert to Grayscale'. 

Now, there's not a lot of control in Illustrator, how you convert to grayscale, just goes, "Yo, grayscale," and hope for the best. If you want to be a little bit more controlling over what goes, different colors got different grays. You can do this in Photoshop. Now this is not a Photoshop course, so we're going to leave that out, but if you do really need that control, jump to Photoshop and do it in adjustment layer called-- it's under 'Layer', 'Adjustment Layers', and it's called 'Black and White'. You get a lot of control over how to convert it to black and white. Save it, then bring it into Illustrator. That's pretty easy though in Illustrator, and I'm happy enough with the result. 

If I want to do the exact same thing-- I'll pop you up there. I want to do the exact same thing to, say this graphic in here, because it's tied to my library it doesn't let me do as much. Watch this, if I double click it, double click it again, I've got my image, and if I go to the exact same thing, 'Edit', and go to 'Edit Colors' you'll notice that it's kind of grayed out. Just one of the things that happens if you're using stuff from your library, because it's kind of connected. If you update your library item it updates here, so it doesn't want you messing with it.

To really mess with it, you just go click 'Embed', so keep double clicking it until you got your image, then go to 'Embed', and then you'll notice, you can 'Edit', 'Edit Colors', and 'Convert to Grayscale'. So I'm going to undo because I don't want to convert him to gray scale, I just want to let you know if you've got to that problem, it might be a logo, you're trying to do it for anything you've imported. 

So, I've got my gray scale, I'm going to put him kind of roughly where I want him, and remember, he has to be at the back. And then I will select both of these two, I’m going to use my shortcut, 'Command 7' on a Mac, and 'Control 7' on a PC. It's kind of what I want, but what I want to do is give it that kind of greeny dark look, and there's two stages to it; you grab your rectangle tool, I'm going to draw out a rectangle that covers the whole document there, and I'm going to give that a fill of black, and give it a stroke of none, and we're going to lower the opacity. You can lower the opacity-- beautiful ways in Illustrator. We're going to use this one along the top here. 

We're just going to go down to kind of where we're happy with the background. Click where you want. Now, obviously this is over the top of everything, so what I'm going to do is, I'm going to go 'right click', and I'm going to go 'Arrange'. Instead of going all the way to the back-- I can go all the way to the back. Now it's behind this image, so I'm going to click on this image, and say, you at the back, there we go. It’s looking better. I want to add that kind of green tinge to it. You might leave it here and decide. Actually I'm going to kind of crank up the opacity. I'm going to have this kind of like, background washed out black look, and that’s fine. 

Next thing I want to do though is-- Stop playing with all the colors, Dan. I'm going to create a new rectangle on top of all of this, so I'm going to deselect in the background first, so black arrow, click in the background, then grab my rectangle tool, makes it easier. Draw a rectangle on the top, I'm going to make this my green. Now I need to get it behind, kind of sandwiched. I want that in front of the black box in the image, but behind all that text. There's a couple of different ways, different trainers will show you different ways. 

What I find easiest to do is just kind of move it off because it's easier to snap back together. Actually I'm going to send this guy to the back, so you, green box, you go to the back, and these guys, I want to bring it above these two, so I'm going to grab you. I've just kind of untiled them all so I can see them all, so I can click you, hold 'Shift', grab the black box, right click both of them, and ‘Send to Back’. So, the green box is in the back, now these guys are behind that green box but in front of this text, so that’s how I do it. There's different ways, using layers panel, that’s my way.

Now what I want to do is, obviously this doesn't quite work, I’m just covering everything, so we’re going to use something called layer mode, and that allows us to-- you could just lower the opacity, that kind of works, but it doesn't give me the look that I want, I really want this kind of strong black with green filling in the edges, so that would work, but what I'm going to do is something called a layer mode, and you do it by clicking the word 'Opacity' at the top there. So, black arrow, click green box, click opacity, and up here where it says 'Normal', that does exactly what you think it was. 

You can play around with these ones, you can see. It's a way of-- that green box interacting with the stuff behind it. Instead of just using opacity you can use these other modes. They're all slightly different. If you've got different image with different colors you're going to find a different layer mode that’s going to work. I'm going to use 'Soft Light' mainly because I've played around with it already, and I like it, but Soft Light's a little strong so what I'm going to do is I'm going to just lower the opacity of that, so I'm using light mode and opacity, and it looks-- I like it a lot better than just lowering the opacity. You can see it's kind of still with the vivid whites, sorry, vivid blacks in the background, but it's kind of tinted as well so it can still get that green and fill up most of it with the green.

Alright my friends, that is how you wash out a background and add a bit of a color to it as well at the same time. Alright, on to the next video.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024