Design a Billboard Advertisement (Part 2)
Sunday, March 29th, 2009 running time 17:44
Last week, we created an energy can to be placed in a billboard. We continue this week by building the rest of the advertisement using both Adobe Photoshop and Illustrator.
Create the billboard canvas in Photoshop
Open your energy drink graphic, and copy the image into a new layer on a large Photoshop canvas.
Use Adobe Illustrator to make the billboard's background design
Bert utilizes Adobe Illustrator to create starburst-like shapes that will serve as the billboard's background design. These shapes will be imported into Photoshop when complete. The method of creating multiple angled lines is done by using the Reflect function and making manual adjustments as needed. Use Object > Join to connect your duplicated lines to create a single shape. Duplicate this shape multiple times using the Reflect function to create a starburst-looking object.
Import shapes into Photoshop and apply color
Copy and paste this path into Photoshop in a layer behind the energy can and adjust the shape as desired. Create a yellow colored gradient in another layer below the can, then make a selection using the starburst paths. In that selection, apply some green color that will contrast with the yellow gradient.
Apply styling to the can using gradients
Apply a glow to the can for additional styling. In this case, we're not going to apply a glow using layer styles. Instead, we'll make a large glow behind the can by using a white color, and creating a radial gradient that fades to transparent. This way, the glow is uniform and doesn't stick to the shape of the can. If the glow isn't strong enough, duplicate the glow layer for more intensity.
Add text to the billboard using Illustrator
Create an ellipse selection in Photoshop using the marquee tool and save this selection as a path. Copy this path and place it in Illustrator. Lock this path, then make a new path with less anchor points using the smart guides, which will help identify the boundaries of the imported path. Apply type to the rounded path and find a font that you like. You can adjust the placement of the text by dragging the handles. Copy this text back into Photoshop as pixels. Finally, apply a white stroke to the text using layer styles to complete this project.
Sponsors:
Netflix - Rent over 90K titles online including Blu-Ray titles. Free shipping to and from your home. Membership starts at only $4.99 and get a free 2 week trial by visiting www.netflix.com/pixelperfect . Yes, you need to type in the "www" when visiting that Netflix link.
GoDaddy - Make an impact online! Domain names come as low as $1.99 and GoDaddy offers world class hosting solutions. Enter code Pixel1 when you check out to save an additional 10% off any order. Visit GoDaddy.com!
Want your artwork on PixelPerfect?
Make sure to send in your artwork to bert@revision3.com if you'd like your image used as Bert's background on a future episode of PixelPerfect. Your image should be a 1280x720 JPG.
Highlights
New York City
(
15:36, 15:36
)
Blu-ray
(
1:58, 1:58
)
gradient tool
(
8:12, 9:40, 8:12, 9:40
)
Photo collage
(
16:28, 16:28
)
New York City
(
15:36, 15:36
)
Blu-ray
(
1:58, 1:58
)
gradient tool
(
8:12, 9:40, 8:12, 9:40
)
Photo collage
(
16:28, 16:28
)
Automatically Generated Transcript(may not be 100% accurate) ( more )
" This episode pixel perfect you've brought do you buy and Netflix and godaddy.com. And welcome the pixel -- that would mean -- on right. On today's show about a table we did last week and -- through the full billboard. Now the background in today's show was sent by John Spence and you know it's a 180 photos in a 360. Degree horizontal panorama. Have you commodity I was I would get this thing. But this thing. 184 warm and to do for. Yeah okay 180 photos -- the as violent -- hands. So well. -- before we start I want to thank our sponsors. Godaddy.com. Get reliable secure web hosting without the long term contract. Godaddy hosting plans are bigger and better -- never -- 99%. Up time. Free 24 sevenths support and no annual commitment I like that part. And to cope -- one when you check out and you will save an additional 10% off your entire order. Get your piece of the Internet at godaddy.com. Also want to thank Netflix for sponsoring pixel perfect. With Netflix you can rent over 90000. Titles online including lots of Blu-ray titles with free shipping both ways to your home. They now have over forty shipping centers so almost all deliveries happen in just one business day. The Netflix plans start from four dollars and 99 cents an as a new member you can get a no risk two week free trial membership. Check it out at www. Netflix.com. -- flash. Pixel perfect and remember you do have that type in net WWW. When using this code. Now. Gonna go and finish what we started this week. Now this week that created this new can of AMP energy drink and G supplements. And so what's gonna happen this week that going to take it and finished it anyway if you remember -- speak it's a little billboard in the times square scene right. And there's all these little lines coming out so that's what I'm gonna re create today. So there's not -- and if you remember idea if you don't go like that we -- on how watch it again now I'll hang on anyway. I thought that. You fit the popular got the cam com that's a composite they were I took all the."
" Is then put him into a single layer and create the file that's gonna become the -- ports on create new file here. Go to standard -- 600. All right so there it is. This guy back here is my -- can sell. I'm gonna just dragged back -- player. Into the scene -- much bigger I always work a larger than when I need the reason for that is that we didn't get a lot more detail. So this little intricate parts of little text that I need to go from medicine. It is a lot more detail I would tend to work really large sometimes 400% of what I need that way when I. We've just gotta point 5% I can bring it over into the other file that's the rule I use and illustrator of particular I work at former percent of what I need. Then when I have all the elements of place I -- take the entire scene Dusan to Tony 5% and then copy and paste it over to Photoshop that way I can. Don't have the strain in and work really tight and loosen up the I -- this type is I want and then when it reaches down it's gonna look really good so hit that -- back on this. The state this and justice pullbacks we can see the whole piece right there right there and it's open up this window. And now political and and reduce the -- to decide that we need such is gonna -- and it's a scale it. And all that -- of kids skillet. Constrained. Ago we get this little can going down to about that size right there click okay. Put in a position right middleware we want it right there. Go back to full size and there's a can into position where you want I don't want back here we could say good bye. Don't save it -- on it with Norton effect there's not -- to -- actual scene there's all these lying is coming out. Illustrator is a much better place to do that include tight so right now I'm gonna switch to illustrator. And would create the basics for the other elements of the scene. You know strip. So now. And Astaro they created long -- angle line just about like that. Right now I want both sides to be perfectly equal. So let's just move data over just a little bit its -- not so fit about like that that's good. And that's -- the whole thing. And that would -- reflect tool. Which was fine right here underneath the rotate to a place at the bottom -- all my my option key to bring up the reflect dialogue box here segment stay on a vertical axis create copy so now I have to date. So now they are exactly in position where they want and maybe I might wanna bring this one -- to those that tap my idea cursor keys out. Seven and this one. Seven's that it kind of equal amount to select both of them cannot come over here. Object path and say join there it -- creates that little line so that these true both say object. Joined NASA's these -- right directly on top of each other the windows going to pop -- and -- How you want -- to be a quarter point or this move might well this obviously a quarter point so corner click okay that is now one shape. -- is that the entire thing. And what might. Rotation tool rotate and place it right -- that senator. Point there I'm gonna hold down my option key to bring up the Diet Coke dialogue box again analysts say give me an angle of let's say 20%. And again give me a -- Click okay there's a copy now appear that this will transform. Then somebody hit the key. The pot the command. All these little faith going around and I -- pity it until I have one complete -- there it is that looks good I'm gonna select all. Copy them."
" And I'm gonna go back to Photoshop. Native Photoshop and here Photoshop its pullback. So -- beautiful area here analysts say pace. -- As path because I'm gonna manipulate him here in a Photoshop click okay and -- come there they are now -- not quite decides I want. But that's no problem because -- can have going to say transform path. No resistance I have a path -- on. The control automatically says paths some to go in and say let's scaled. Solo skit on sort of they come way out. Like so. Way out into the outer reaches of the dead. -- billboard in this case just like that. Make that happen that -- a on the outside so let's go in there and save that path. Say the path we don't lose it right so now. Go back to others and the background add some color you assume yellow it's on -- going to get a nice bright yellow. Bright -- like that and I would go to -- a deeper yellow. I like that. There is nice of distinction and he -- get my gradient tool. And with a radial gradient in place of my fitness center and hold on my fiftieth street I'm gonna go in there and create a nice gradient right. So now we're on top of that. And it's frightening things is gonna be our green stripes. And as -- path comes and now I could just -- dream but no again there's a preview to the image someone turn into a selection. There's my selection -- that right layer and you know what we're gonna turn off the marching ants so that you guys don't see was happening did make it. Easier I'm gonna pick a nice green we'll pick a green like this one. And steep green going to a darker version of that mean like that. The area and again I -- the radial gradient from the center out. But this time is gonna fall incendiary of the selection and here's my nice little selection. Might it nice and gradient now directly behind you can there's a close and create another layer and so they'll call Colo. I've just the glow around the -- I'm not going to give it a an hour ago layer style no. Because regular not a -- goes gonna kind of follow the -- it can't. In the billboard would look like the center of our little lives back there how they glow bright in this and that's gonna do is create a nice big glow in there. The switch my foreground color to white. And I get again that gradient tool with a greater great except that some -- the change the mote to foreground to."
" Trans parent. And go in here and click and dread to think before just -- so I'm gonna get this nice. Low right on top of -- Baghdad have not strong enough but -- duplicate that there which starts making a little. Writer to say that and that I would get this nice. Bright white glow effect that effect it was no business -- that's good enough I -- just like that America is so hot spot happening back there. -- now now comes time for that little text so let go back into illustrator. Back into illustrator and so that I want a little guide for myself so one image is going he would create a new guy for myself and Lanier and -- select that and will create little. Kind of -- let's just like this survey so we want is moved into position and when -- type to go right across the top just like that. I'd say that's good so I'm gonna turn that selection. Into a path. That's what reflected this guy becomes active which that little guy you feel. That make work path from selection so I click on that and I get a -- Which they announced that that path."
" Copy it and go back into. Illustrator. And though create a whole new file here in fact I'd like to keep everything in one place so this this move could script is big were born here that we who work with. So now I'm going to as they pace. Compound faster it's faster click okay there it is not a little lock that this does is basically going to be just a little guy from myself and -- air and -- the little black the black line to it and unlock it. Just because I don't really want this guy am -- gonna use and he's got too many points it just becomes a -- today out here I can create my own path. So I'm gonna kinda just look for those very same areas that he could see that I'm using my smart guys who tells me exactly went on at the top bottom. Thank you create a shape that's gonna kind of conform to that same. She sat there. Great that looks good analysis moved this guy up here. What type. The better way here and now I'm gonna switch to my text tool. And going to use the one that's type on a path and a click right up there. Brian I am gonna say yeah. As to say hello there. That's kind of what it says in the sign from my that -- select all let's -- myriad pro and we'll make a much bigger. Let's just say we do -- let's go -- 120 points and the Fiat has going to look that's. -- that's good that'll work. In some cases and I want to use the total war decorative thing you know if you go through here and you look at this list. There's all the fonts we have but if you go to character right there which brings up the character panel. Which you could normally get through here but -- right here if you use this list you'll see did you get a symbol of what they looked like. So this is far more intuitive and you can kind of pick your your character based on what you're seeing here so I wanted to go through here and find something that kinda. Had a little more impact to it so. Will pick you know what let's go to school for standard. Black okay that's not what's in the sign but we'll use it to because we can. And let's make -- smallest make it nine viewpoints. -- edit and there we go so now. It's going along the edge here so that those who going to send to attack thousands Lucent did it look what happened went to the bottom. And that's because when you sent us things like that the nifty little handles the start and the ending about type it automatically goes to the top so what I'm doing I'm gonna move these guys. -- directly at the bottom. And move this guy and bring them down here and now type is at the top there it isn't it stunning okay great so it does those type. I'm not gonna go in here and say let's take this. And copy that it's like this type we got it copy. Go back into my Photoshop file. And because what better way we don't mean that that path anymore and I'm gonna say paste."
" And paste which is one place of course there -- now does some abrasive and as pixels. Pixels why because I actually add the color I want that black that we had -- in the scene so I could bring it in as pixels click okay and type who's gonna command any second now. As a form to its own layer there it is hello there. Rights and how we could put in the position right about there where we want it. That gave me that happened there. But a lot of layers and there's a type that get a little closer on this that you -- to type -- type in the -- to handle these though. White edges around someone going there and double click on this and add that I could've done that."
" And illustrator but. Whatever I'm doing there I'm not really looking at in the context of everything else so I'm gonna do that here in illustrate enough provision. And the latest on the to actually go -- stroke this and stroke it has like yourself that way it always. Change in and just to change its color whatever is necessary and I'm not. Me and -- infinite into the art son I'm gonna say give it a little stroke and stroke should be -- Click okay and there we can see that and I might want to go and it just maybe make it a little thicker as the little things like that. Click okay and there we see that now we can do and move them at the bottom put more stuff whatever we want but news feed I would now we have. From that it can it was done with last week we've built up into this whole little -- board that's going to appear. And streets of times square New York City. Now there's a lot of things in there -- bits and pieces always everything that I do look at it not for the end result but how I got there. That's very important because all those different pieces a little change here and there you extra. Color gradient of color -- different mode is gonna change the way if something works is the question of going in there and understanding those steps. Look at the steps that the end result but how I got there that's the best way to learn and and sit there and play -- that stuff and see what you can come up with. That's the best way to -- of course is to sit there. And play. If there's anything that you like to see -- show email me hurt at revision3.com. Also you can check out the forms at revision3.com. Forward slash forums they could join discussions about the show. Thanks again to John -- the submitting this. 180. Photo collage panorama of big thing over here. In -- background let's look at one more time. I -- look at that that 184. I got a really -- and look at that thing. You want to back fears that it is green screen. Green they get that. You want your work there. Send me your designs to -- at Revision 3 com and you're back on should be 1280 by 720 pixels and save as JPEG. Hoping -- best remembered played as Sweden and -- to sit there and play this is and work its plan. See you next week."
" This episode pixel perfect you've brought do you buy and Netflix and godaddy.com. And welcome the pixel -- that would mean -- on right. On today's show about a table we did last week and -- through the full billboard. Now the background in today's show was sent by John Spence and you know it's a 180 photos in a 360. Degree horizontal panorama. Have you commodity I was I would get this thing. But this thing. 184 warm and to do for. Yeah okay 180 photos -- the as violent -- hands. So well. -- before we start I want to thank our sponsors. Godaddy.com. Get reliable secure web hosting without the long term contract. Godaddy hosting plans are bigger and better -- never -- 99%. Up time. Free 24 sevenths support and no annual commitment I like that part. And to cope -- one when you check out and you will save an additional 10% off your entire order. Get your piece of the Internet at godaddy.com. Also want to thank Netflix for sponsoring pixel perfect. With Netflix you can rent over 90000. Titles online including lots of Blu-ray titles with free shipping both ways to your home. They now have over forty shipping centers so almost all deliveries happen in just one business day. The Netflix plans start from four dollars and 99 cents an as a new member you can get a no risk two week free trial membership. Check it out at www. Netflix.com. -- flash. Pixel perfect and remember you do have that type in net WWW. When using this code. Now. Gonna go and finish what we started this week. Now this week that created this new can of AMP energy drink and G supplements. And so what's gonna happen this week that going to take it and finished it anyway if you remember -- speak it's a little billboard in the times square scene right. And there's all these little lines coming out so that's what I'm gonna re create today. So there's not -- and if you remember idea if you don't go like that we -- on how watch it again now I'll hang on anyway. I thought that. You fit the popular got the cam com that's a composite they were I took all the."
" Is then put him into a single layer and create the file that's gonna become the -- ports on create new file here. Go to standard -- 600. All right so there it is. This guy back here is my -- can sell. I'm gonna just dragged back -- player. Into the scene -- much bigger I always work a larger than when I need the reason for that is that we didn't get a lot more detail. So this little intricate parts of little text that I need to go from medicine. It is a lot more detail I would tend to work really large sometimes 400% of what I need that way when I. We've just gotta point 5% I can bring it over into the other file that's the rule I use and illustrator of particular I work at former percent of what I need. Then when I have all the elements of place I -- take the entire scene Dusan to Tony 5% and then copy and paste it over to Photoshop that way I can. Don't have the strain in and work really tight and loosen up the I -- this type is I want and then when it reaches down it's gonna look really good so hit that -- back on this. The state this and justice pullbacks we can see the whole piece right there right there and it's open up this window. And now political and and reduce the -- to decide that we need such is gonna -- and it's a scale it. And all that -- of kids skillet. Constrained. Ago we get this little can going down to about that size right there click okay. Put in a position right middleware we want it right there. Go back to full size and there's a can into position where you want I don't want back here we could say good bye. Don't save it -- on it with Norton effect there's not -- to -- actual scene there's all these lying is coming out. Illustrator is a much better place to do that include tight so right now I'm gonna switch to illustrator. And would create the basics for the other elements of the scene. You know strip. So now. And Astaro they created long -- angle line just about like that. Right now I want both sides to be perfectly equal. So let's just move data over just a little bit its -- not so fit about like that that's good. And that's -- the whole thing. And that would -- reflect tool. Which was fine right here underneath the rotate to a place at the bottom -- all my my option key to bring up the reflect dialogue box here segment stay on a vertical axis create copy so now I have to date. So now they are exactly in position where they want and maybe I might wanna bring this one -- to those that tap my idea cursor keys out. Seven and this one. Seven's that it kind of equal amount to select both of them cannot come over here. Object path and say join there it -- creates that little line so that these true both say object. Joined NASA's these -- right directly on top of each other the windows going to pop -- and -- How you want -- to be a quarter point or this move might well this obviously a quarter point so corner click okay that is now one shape. -- is that the entire thing. And what might. Rotation tool rotate and place it right -- that senator. Point there I'm gonna hold down my option key to bring up the Diet Coke dialogue box again analysts say give me an angle of let's say 20%. And again give me a -- Click okay there's a copy now appear that this will transform. Then somebody hit the key. The pot the command. All these little faith going around and I -- pity it until I have one complete -- there it is that looks good I'm gonna select all. Copy them."
" And I'm gonna go back to Photoshop. Native Photoshop and here Photoshop its pullback. So -- beautiful area here analysts say pace. -- As path because I'm gonna manipulate him here in a Photoshop click okay and -- come there they are now -- not quite decides I want. But that's no problem because -- can have going to say transform path. No resistance I have a path -- on. The control automatically says paths some to go in and say let's scaled. Solo skit on sort of they come way out. Like so. Way out into the outer reaches of the dead. -- billboard in this case just like that. Make that happen that -- a on the outside so let's go in there and save that path. Say the path we don't lose it right so now. Go back to others and the background add some color you assume yellow it's on -- going to get a nice bright yellow. Bright -- like that and I would go to -- a deeper yellow. I like that. There is nice of distinction and he -- get my gradient tool. And with a radial gradient in place of my fitness center and hold on my fiftieth street I'm gonna go in there and create a nice gradient right. So now we're on top of that. And it's frightening things is gonna be our green stripes. And as -- path comes and now I could just -- dream but no again there's a preview to the image someone turn into a selection. There's my selection -- that right layer and you know what we're gonna turn off the marching ants so that you guys don't see was happening did make it. Easier I'm gonna pick a nice green we'll pick a green like this one. And steep green going to a darker version of that mean like that. The area and again I -- the radial gradient from the center out. But this time is gonna fall incendiary of the selection and here's my nice little selection. Might it nice and gradient now directly behind you can there's a close and create another layer and so they'll call Colo. I've just the glow around the -- I'm not going to give it a an hour ago layer style no. Because regular not a -- goes gonna kind of follow the -- it can't. In the billboard would look like the center of our little lives back there how they glow bright in this and that's gonna do is create a nice big glow in there. The switch my foreground color to white. And I get again that gradient tool with a greater great except that some -- the change the mote to foreground to."
" Trans parent. And go in here and click and dread to think before just -- so I'm gonna get this nice. Low right on top of -- Baghdad have not strong enough but -- duplicate that there which starts making a little. Writer to say that and that I would get this nice. Bright white glow effect that effect it was no business -- that's good enough I -- just like that America is so hot spot happening back there. -- now now comes time for that little text so let go back into illustrator. Back into illustrator and so that I want a little guide for myself so one image is going he would create a new guy for myself and Lanier and -- select that and will create little. Kind of -- let's just like this survey so we want is moved into position and when -- type to go right across the top just like that. I'd say that's good so I'm gonna turn that selection. Into a path. That's what reflected this guy becomes active which that little guy you feel. That make work path from selection so I click on that and I get a -- Which they announced that that path."
" Copy it and go back into. Illustrator. And though create a whole new file here in fact I'd like to keep everything in one place so this this move could script is big were born here that we who work with. So now I'm going to as they pace. Compound faster it's faster click okay there it is not a little lock that this does is basically going to be just a little guy from myself and -- air and -- the little black the black line to it and unlock it. Just because I don't really want this guy am -- gonna use and he's got too many points it just becomes a -- today out here I can create my own path. So I'm gonna kinda just look for those very same areas that he could see that I'm using my smart guys who tells me exactly went on at the top bottom. Thank you create a shape that's gonna kind of conform to that same. She sat there. Great that looks good analysis moved this guy up here. What type. The better way here and now I'm gonna switch to my text tool. And going to use the one that's type on a path and a click right up there. Brian I am gonna say yeah. As to say hello there. That's kind of what it says in the sign from my that -- select all let's -- myriad pro and we'll make a much bigger. Let's just say we do -- let's go -- 120 points and the Fiat has going to look that's. -- that's good that'll work. In some cases and I want to use the total war decorative thing you know if you go through here and you look at this list. There's all the fonts we have but if you go to character right there which brings up the character panel. Which you could normally get through here but -- right here if you use this list you'll see did you get a symbol of what they looked like. So this is far more intuitive and you can kind of pick your your character based on what you're seeing here so I wanted to go through here and find something that kinda. Had a little more impact to it so. Will pick you know what let's go to school for standard. Black okay that's not what's in the sign but we'll use it to because we can. And let's make -- smallest make it nine viewpoints. -- edit and there we go so now. It's going along the edge here so that those who going to send to attack thousands Lucent did it look what happened went to the bottom. And that's because when you sent us things like that the nifty little handles the start and the ending about type it automatically goes to the top so what I'm doing I'm gonna move these guys. -- directly at the bottom. And move this guy and bring them down here and now type is at the top there it isn't it stunning okay great so it does those type. I'm not gonna go in here and say let's take this. And copy that it's like this type we got it copy. Go back into my Photoshop file. And because what better way we don't mean that that path anymore and I'm gonna say paste."
" And paste which is one place of course there -- now does some abrasive and as pixels. Pixels why because I actually add the color I want that black that we had -- in the scene so I could bring it in as pixels click okay and type who's gonna command any second now. As a form to its own layer there it is hello there. Rights and how we could put in the position right about there where we want it. That gave me that happened there. But a lot of layers and there's a type that get a little closer on this that you -- to type -- type in the -- to handle these though. White edges around someone going there and double click on this and add that I could've done that."
" And illustrator but. Whatever I'm doing there I'm not really looking at in the context of everything else so I'm gonna do that here in illustrate enough provision. And the latest on the to actually go -- stroke this and stroke it has like yourself that way it always. Change in and just to change its color whatever is necessary and I'm not. Me and -- infinite into the art son I'm gonna say give it a little stroke and stroke should be -- Click okay and there we can see that and I might want to go and it just maybe make it a little thicker as the little things like that. Click okay and there we see that now we can do and move them at the bottom put more stuff whatever we want but news feed I would now we have. From that it can it was done with last week we've built up into this whole little -- board that's going to appear. And streets of times square New York City. Now there's a lot of things in there -- bits and pieces always everything that I do look at it not for the end result but how I got there. That's very important because all those different pieces a little change here and there you extra. Color gradient of color -- different mode is gonna change the way if something works is the question of going in there and understanding those steps. Look at the steps that the end result but how I got there that's the best way to learn and and sit there and play -- that stuff and see what you can come up with. That's the best way to -- of course is to sit there. And play. If there's anything that you like to see -- show email me hurt at revision3.com. Also you can check out the forms at revision3.com. Forward slash forums they could join discussions about the show. Thanks again to John -- the submitting this. 180. Photo collage panorama of big thing over here. In -- background let's look at one more time. I -- look at that that 184. I got a really -- and look at that thing. You want to back fears that it is green screen. Green they get that. You want your work there. Send me your designs to -- at Revision 3 com and you're back on should be 1280 by 720 pixels and save as JPEG. Hoping -- best remembered played as Sweden and -- to sit there and play this is and work its plan. See you next week."
mari1ee
Started discussion: March 30, 2009 @ 2:02am GMT
Episode 119 - Design a Billboard Advertisement (Part 2) [Discussion]
Last week, we created an energy can to be placed in a billboard. We continue this week by building the rest of the advertisement using both Adobe Photoshop and Illustrator.
Watch or download now!












Thanks!