Production video - Adding your icons

This lesson is exclusive to members

Course contents
SECTION: 7
Color 3:42
SECTION: 10
Page adjustments 1:28

Questions

Course info

49 lessons / 3 hours

Overview

Web 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 Photoshop. We’ll start right at the basics of Photoshop and work our way through to building professional website concepts.

I created this course for people new to the world of website design and Photoshop. I created this for people nervous about changing their careers into the world of web design.

You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what types of files and code are required at the end of your job. This course is for people serious about making money as a professional web designer.

Now let me help you earn more money, get that job and become more awesome!

What are the requirements?

  • You'll need a copy of Photoshop CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Photoshop or web design experience is necessary.

What am I going to get from this course?

  • 49 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • 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 design. No previous experience is necessary. 

This course is NOT suited to people highly experience in the world of website mockups in Photoshop already.

Course duration 2 hours 43 mins

Get the completed files here
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

Transcript

All right. It's gonna be a production video. We're just gonna add some text underneath our icons. So I'm gonna grab my type tool, click once,  make sure it's head to center. I'm gonna pick a color of white. Uh, I'm gonna pick for font bold  and the size wise, I'm gonna bump it up  to not sure yet, about 30 maybe.

Okay. And the first service is going to be print. That's gonna be all caps. All right. The next bit is I'm gonna grab my type two. I'm gonna put a little bit of kind  of body copy underneath it.

I'm gonna open up my uh, guides  to make sure I don't go over the top  and it's gonna be kind of patted in a little bit extra. And I'm gonna add some text. So remember we are gonna go to type place Lauren Epson. I'm just gonna put loads of Lauren Epson in there. Okay. Now if I wanna select all the Lauren Epson  and change the size of it, if I drag a box,  unfortunately if I change the size of this one down  to something like 12, I've only selected that part.

So what you wanna do is, um, triple click. So 1, 2, 3, 4. When I say triple click, I mean four clicks. Okay? So 1, 2, 3, 4. It grabs every bit of text  and it will grab the text that you can't see as well.

So I'm gonna bump this down to say 14 pixels  and we'll move it to say the regular. How many lines do I want? In this case, I'm gonna bump it up  'cause I like the look at three lines. Okay? Remember also if I click in here with my type tool,  I wanna turn my hyphenation off. So to do it, click this little box here, click paragraph,  turn hyphenate off,  and we'll get rid of that Hyphenation that I don't like.

What I like to do is these two text boxes here. So I've got print and Lauren nips been selected. I'm going to hold down the alt key,  actually turn my guides on first, hold down my alt key  and use the Move tool to drag out a copy. I'm holding down the shift key while I'm dragging it  to make sure it comes perfectly to the side here. And I'm gonna do that for all of these. I drag 'em across.

So I've got four sets. Now I'm gonna go in and change it. So this one's called App Dev, okay. This one here is going to be photography. It's gonna be video. Great.

I'm gonna leave the Lauren  ipsm 'cause it doesn't mean anything. Anyway, turn off my guides, make sure everything lines up. Lines up, okay. Lines up. Okay. What I might do is I'm gonna grab all the Lauren SSOs  and just bump them up a little bit.

There we go. There's all four of them. And use my arrow keys just to tap them up  so they join that bit a little bit. What I also might do is grab my icons. I've got Icon one, two,  and this other guy there he is underneath my text. I might get along, along the base.

Happy enough. All right, that's the end of the production video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025