Adapt a print design for a web banner Ep32/33 [Adobe Photoshop for Beginners]

Adapt a print design for a web banner Ep32/33 [Adobe Photoshop for Beginners]

October 7, 2019 12 By Peter Engel


(bright electronic music) – [Gareth] Hello and welcome
to this video tutorial. Gareth here from tastytuts.com. So in the previous video, we
completed the book of a design and exported the file
to be used for print. Now, up to this point on the course, we have been focusing on design for print. In this video, I want to
cover an example for digital. So by the end of this course,
you will have an understanding of design for both print
and digital in Photoshop. In this tutorial, I’m going
to discuss and demonstrate how I took the finished print design, and from that, created this
digital, web banner design, to advertise the book online. Now, the idea of this exercise
is for you to experience how we can adapt a print
design and export for web. So here is an example of a
web banner I have created from the print design. What I have done here is
superimposed the book cover onto a book to create this interesting ad to promote the book online. This is what we are going
to create in this tutorial. If you would like to take a
closer look at this example, you can find this in the
final artwork folder, in the project folder. Now, we are going to be
covering a lot in this video, and in quite some depth. If you wish to skip ahead
to any point in this video, or back, you can do so quite simply. The topics covered in
this video are listed in the description, and downloadable PDF, along with their times, so
be sure to check that out. So to start, I’m going
to set up the document for the banner. Now on this occasion, I’m
going to create a standard MPU banner, which is 300
pixels by 250 pixels. So, drastically smaller
than the book design. This will be an exercise
to manage our creative in a different way. So I’ll come to file, new. I’ll name the document “Book web banner.” I’ll make sure the value is set
to pixels over on the right, and then type in a width of
300, then a height of 250. Now, on this occasion, because
we are creating a design for digital, it does not
matter what the resolution is. What’s important here, is that
the dimensions are correct. On this occasion, I’ll just
type in 150 for resolution, and I’ll make sure my
color mode is set to RGB. I’ll click okay, and
here is our new canvas. So now I’m going to start to
build the creative elements. So to make this easy, I’m going
to take some of the creative elements I made in the book
to use in this banner here. So now I’ll come into my project folder, and open up the book cover
design I created previously. Now, if you’re completely
new to this course, and you wish to follow
along, you can also find this finished book cover design
in the final artwork folder in the project folder. So with the book cover design open, I’m going to start by
taking the background sky, so I’ll come onto the layers panel, and click on the background layer folder. With the move tool, I’ll
click in the canvas area, click and drag up, and
into the banner document. I’ll place my mouse
cursor into the web banner canvas area, and release. Now, upon release, this is
going to be rather large in my canvas area. This is because the print
document is far larger than the web banner. So with the background
now in the web banner. I’ll press command T to
activate free transform, I’ll zoom right out so I
can see the bounding box. I’ll press and hold shift
and alt, and drag right in. And then click the corner points to fill the banner document,
and then press enter. So just like that, I have placed
in the gradient background. Now, keep in mind that
this document is RGB, and the print document is CMYK. As I drag design elements
from the CMYK document, once they appear in the
web banner document, they will now become RGB. More on that later. So that’s the background. So next, I’m going to pull in the grass. So I’ll come back into the
book cover design document. With the move tool, I’ll
right click on the grass and select the layer. I’ll then click on the
canvas area and drag up into the web banner tab and drop it in. Again, I need to press
command T and zoom out, and scale down. This time, however, I’ll
scale down quite a lot. I don’t want the grass to be too big here, so I’ll scale it down like so. So now it’s not fitting across the bottom, so I’ll press and hold
alt, and click and drag with the move tool across, to
quickly duplicate the layer and add more grass like so. I’ll select both layers
in the layers panel. I’ll press command E,
and this will merge them into one layer. And I’ll rename this layer to grass. So next, I want to bring in
some clouds to fill the sky. So back into the book cover document, and navigate to the header smart object in the layers panel, that
contains all the clouds. I’ll double click on the
smart object thumbnail. This will open up the smart object, and here, I can get access
to all the cloud layers. Now, earlier in the course,
when we set up these clouds, we also applied adjustment layers to them, in order to change the brightness. Now at this point, it’s
important to mention that this document is CMYK. Now because we are currently
taking design elements from a CMYK and transferring
them to an RGB document, there are limitations for example. So with the move tool, I’ll right click on one of the clouds here. Once I have it selected,
I’ll press and hold shift, and I’ll also select the
adjustment layer applied to it. With them both selected,
I’ll click and drag up into the tabs, and place
into my web banner document. Now notice how the
creative will not appear. It will not be placed
inside the new web banner. Well this is because we
are trying to drag over an adjustment layer with CMYK values. This will not cross over on this occasion. So back in the clouds
document, instead of dragging both the adjustment layer, and the cloud, I’m simply going to
select the cloud layer, click and drag that across,
and that will be placed into the document. Notice in the next panel,
this is a smart object. This cloud smart object was
created in a previous episode. This is going to allow us
to scale this up and down, without losing any quality. So I’ll press command T
and scale down the cloud in my document like so. Now, on this occasion, I just want this to be a solid one shape. This cloud does include
texture, but in this instance, it’s so small it’s not
particularly legible. It’s looking a little blurry,
and this is also a small composition, so it would
be easier on the eye to go with a simpler approach. So, I’ll come into the layers panel, double click to the right of the name, to call up the layer styles. So I’ll give this a layer
style of color overlay. On the color, I’ll type in F six times to get a perfect white, and click okay. So I’ll press command
T, scale down the cloud, and position it over on the side, like so. Once happy, I’ll press enter. Then, I’m simply going to
press seven on the keyboard. Now, this is going to set
the opacity to 70% quickly. So now I’m just going
to duplicate this cloud around a little, just to fill
the sky with some clouds. I’ll do this with the move tool, by pressing and holding alt,
and clicking and dragging. This will duplicate the shapes, and we will also start to
get multiple new layers in the layers panel. I’ll also use command T to scale various clouds up or down. I’ll also toggle the
opacity of some of them, just to get a variety of brightness. So shortly, I’ll have
something that looks like this. So after I have created
a few cloud examples, I’ll come into the layers panel, select the top cloud,
press and hold shift, select the bottom cloud,
and press command G, to group them together and
I’ll name the folder clouds. So now I’m going to bring in the book. So, to do this, I’m first going to create a new design element. So I’ll come into the project folder, click the create a project folder, and navigate to the assets folder. In the assets folder, I’ll
open up number eight book web. So here is a file I have prepared earlier. Here, we have a blank white book, and in the layers panel,
we can see that this is set on top of some other layers,
which we can toggle on and off. So what I’m going to do now,
is superimpose my book cover onto this book, and bring
this into the web banner. So let me demonstrate a
cool tip for doing this. So I’ll zoom into the book,
I’ll come into the menu and select the rectangular marquee tool. Now, I’m going to draw a
selection over the book face. We can see here that the
book it at a perspective, but right now I want to guess
what the size of the book cover would be if it was straight on. So with the new selection,
I’ll press command shift N, to create a new layer. And I’ll name this layer
book face and press enter. So I’ll come into the foreground color, and here I can select any color I like. On this occasion I’ll
just go for a yellow. With the paint bucket tool,
I’ll fill the selection to get the rectangle shape like so. Great. Now once I have created this shape, I’ll come into the legs panel,
right click on the layer, and click convert to smart object. Next, I’ll come up into the blending mode, and set this to a
blending mode of multiply, so now we can see the book
shadows through the color. Okay, so here comes the tricky part. So now, I’ll press command T
to activate free transform. So I’ll move the bounding
box into the width of the book face, then
I’ll press and hold command on the keyboard and drag
the corner points over the book cover like so. What I’m aiming to do here
is match the book face layer to the same perspective of the book cover. I’ll press and hold space bar to maneuver around the document. Still holding command on the keyboard, I’ll drive the points
over the corners like so. Once I’m happy, I’ll press enter. Great. So now the book face is
perfectly matching the book. Now, if I come into the layer panel, and double click on the book
face smart object thumbnail, up will pop the smart object, the rectangle shape we made earlier. Now, why is this not distorted
like in the other document? Well, upon creating the smart object in the previous document, we
only applied the transform effect to the layer, and not the contents of the smart object. So I’ll come back into the print document, I’ll press command A to select all. With the selection all
around the entire design, I’ll press and hold shift,
press command and press C. This will copy all the layers. So I’ll come back into my
book face smart object, and press command V to paste this in. Just like earlier, I’ll press command T and zoom out, I’ll drag
in my bottom right point to snap with the document and press enter. So now, the entire book
cover is in the smart object. Now, I’ll press command
W to close the document, and be sure to save. Now, back into the book web document, we can now see the book
cover perfectly superimposed onto the book face. Pretty cool right? Okay, so now I want the
back of the book to be red. So with the polygonal lasso
tool, I’ll make a selection over the back of the book, like so. With the selection, I’ll
press command shift N to create a new layer. I’ll call this red back. I’ll choose a red color from the menu, and use the paint bucket tool to fill. With the new red color,
I’ll set a blending mode to the layer of multiply. So that now finishes the book. So now I’ll come into the layers panel, and toggle the visibility of
all the background layers, so all I can see is the
transparency around the book. I’ll come to file, save as, and navigate to my project folder and save this inside as a web
book cover, and click okay. Once saved, I’ll close the document, and come back to my banner. So now, I’ll come up to file
and select place embedded. If you’re using an earlier
version of Photoshop, this will just be place. So I’ll navigate to my project folder, where I just saved the book cover graphic. I’ll click it and press place. Upon click, it will appear
inside my new banner composition as a smart object. I’ll scale it up slightly, press enter, and move it over to the right. Next, I’ll double click on the
new smart object layer name, and rename this to book. Now, if at this point,
I feel the bottom green of the book is clashing
too much with the grass in the background, I’ll
select the grass layer, I’ll press command U to
activate hue saturation. Here, I’ll toggle the hue and saturation just a little, to create
a bit more contrast. So next, I want to create
a subtle white glow around the book. So I’ll double click on the book layer, to bring up the layer styles. I’ll select outer glow over on the right, I’ll set the blending mode to normal, the opacity to 80%. I’ll click on color and
type in F six times, for a perfect white. I’ll set the spread to 25, the size to 50, and push the range all the
way up to 100% and click okay. Now, I have an issue here. I’m not really liking the
white glow on the green grass area here. Ideally, I just want the
glow to be on the sky area. So what I’ll do here, is
click on the book layer, and press command J to duplicate. This will also duplicate
the layer styles applied. So I’ll move the new layer
in the layers panel down under the grass layer. Then I’ll come back to the
book layer on top of the grass, I’ll click on the layer
style in the layer, and drag down to the trash
can, to remove the styles. So now, I have the glow
effect around the book in the sky area, and
not on the grass area. Perfect. So I’ll quickly rename this new layer under the grass layer to book glow. So now I want to add
the messaging of my ad. So I’ll press T to activate the type tool, I’ll click to the top left of the ad. Up in the control panel,
I’ll set the type size to 13 points, I’ll type
league into the font name, and select league spartan. I’ll then click the align type to center. I’ll click the color box, select a red, and start to type in capitals. I’ll type the first letter, press enter, and type the second letter. Now depending on the character settings, I’ll come into the character panel, and make sure there is adequate
space between the type. The leading. I’ll set this to 15
points and press enter. Once happy, I’ll press and hold command,
and D and press enter to deselect the type. If I want to refine the type size further, I’ll press command T,
and scale up or down. Now, depending on whether new type layer is in my layer structure,
I’ll click on it, and drag it up to make
sure it sets to the top of everything else. Now, I also want to apply
the same white outer glow to this type as I did to the book. A quick tip here is to
come to the book layer, with the glow effect under the grass. I’ll press and hold alt on the keyboard, click on the fx icon on the layer, and click and drag up
to the new type layer. Upon release, this will
duplicate the layer style’s properties, and apply them
to this new type layer. Easy. So this is looking a little bright here. So I’ll double click on the
fx icon on my type layer, and just toggle the opacity done slightly of the glow, to around
50%, and click okay. So now all this type is red. On this occasion, I
want to add more color. So I’ll press T and
select the bottom letter. With it selected, up in the control panel, I’ll click on the color square box and type in the value 06A6E9. This will give me the blue
color, and I’ll click okay. I’ll then press and hold command and D, and press enter to deselect the type. So that’s the header type. So I’ll press T to activate
the type tool again. This time, I’ll click
in the space just under the header type. In the control panel,
I’ll keep the same font, though change the size to 6.5 points. I’ll click in the color box, and change the color to a darker blue. I’ll type in, 0377A7, and click okay. I’ll click on the center
align icon over to the right, and I’ll start to type, pressing enter to line
break as I go along. Now if the gaps between my
lines are too big or small, with all the type selected, I’ll come into the character panel, and toggle the leading, like so. Soon, I’ll have something
that looks like this. And I’ll press and hold
command, and D and press enter to deselect the type. If I want to refine the size
further, I can press command T and scale it up or down. So I’ll come into the layers panel, select the type layers,
and press command G to group these into a folder,
and I’ll all the folder type. So now all that’s left to do is create the call to action button at the bottom. So I’ll come into the shape builder tool, and select the rectangle shape. I’ll click the top layer
in the layers panel, and click to draw a
rectangle shape like so. Once placed, I’ll use free
transform to tweak the shape and position slightly. Once I’m happy with the
shape, I’ll press A to select the shape, then up in the control panel, I’ll click to change the fill color. I’ll click the spectrum,
and type in the color value FABF36, and click okay. And make sure the stroke
is set to transparent. So now this button is
looking a little flat. In this instance, I want to
give this a little effect to make it look more eye catching. So with the new shape layer
selected in the layers panel, I’ll press command J to duplicate it. I’ll press A to select the shape. Up in the control panel, I’ll set the fill color to white. Next, I’ll zoom right in
and I’ll press command T. Now, I’m carefully going to
drag the corner points in, so I can see about two pixels
of the orange background around the white shape. I’ll press enter to commit. Next, I’ll come up to
the opacity of the layer, and change to 40%, or simply
press four on the keyboard. Next, I’ll come down to the
bottom of the layers panel, with the shape there
selected in the layers panel, I’ll click the add layer mask button. I’ll come over to the menu, click and hold on the paint bucket tool, and select the gradient tool. I’ll make sure my foreground
and background color is set to black and white. If not, I’ll just press D on the keyboard. Then click and drag down
on top of my white shape, applying a mask and creating
a nice gradient effect. I’ll zoom out. So here, I have subtle,
white gradient effect, just to give it a little 3D button effect, with the orange stroke around the side. Nice. So next, I’m going to create
the type for the button. So I’ll come into the type folder, click the type layer under the header. With the move tool,
I’ll press and hold alt and click and drag down like so, to quickly duplicate the layer. In the layers panel,
I’ll move it up and out of the type folder, on
top of my shape layer. I’ll press T to click into the type, and change the type to find
out more, in caps, like so. I’ll select the type,
click on the color box up in the control panel,
and change the color. In the value, I’ll type,
DD510C and click okay. I’ll press and hold command and D, and press enter to deselect the type. Then, I’ll press command
T to toggle the size inside the box. Now, notice, I have left some space to the right of my box. Well now, I’m going to
place a little arrow here. So I’ll come into the menu, and select the shape tool and
select the custom shape tool. Up in the control panel,
I click down on shapes. Over on the cog on the right,
I’ll click this and select arrows from the menu below. I’ll select a arrow shape here. Come into my button, and
click to draw an arrow in my button like so. Upon release, up in the control panel, I’ll make sure the fill
color is set to the same as the type to the left. I’ll click in the spectrum to the right, and up in the color picker,
I’ll type the value DD510C and click okay. And I’ll set the stroke to
transparent, and press enter. So I’ll come into the layers panel, select the layers that
make up this button, I’ll group them together,
and call the folder, CTA. So finally, I’ll add
one final type element. In the CTA folder, I’ll click
the find out more type layer, press and hold alt, and
click and drag above. I’ll press T and click
into the type layer, and type out now. I’ll change the color to white, then resize and position accordingly. If I need to, I’ll move
some of the elements around in the composition to accommodate. I’ll now select the book glow layer, the grass layer, and the book layer. I’ll group these into a folder, and name this book and base. So now, all my creative
elements are neatly structured in these layer folders. Once happy, I’ll press command S to save, I’ll navigate into my
project folder and save. So that’s how I adapted
a book cover design, and created a design for digital. Now once I’m happy with this banner, it’s now time to export for web. Now in Photoshop, the
process of exporting for web is different compared
to exporting for print. In Photoshop, when exporting for web, we use a different function. The export for web feature. In the next video, I will be discussing and demonstrating how to use this feature. See you in the next video. (upbeat electronic music)