Magazine Cover Redesign: Student Feedback

Magazine Cover Redesign: Student Feedback


well hey good morning everybody how you
doing and it’s a beautiful really sunny Brighton one day no Sun didn’t know it so good
so this coffee mug actually I’ve been drinking out of almost every morning for
the last 12 years or so this was a gift actually from an exchange student from
the Czech Republic and I love this thing I was kind of short night to head to
wake up bright and early to run my rig to the mechanic to get some work done on
the brakes and early making some tutorials
it’s a beautiful crazy sunny day here in Montana and for today’s tutorial what I
want to do is actually more of a Q&A so I’ve got a bunch of students in a
membership group you can check it out at Doug Mitchell calm and she sent me a
message on slack with magazine cover she’s working on – want some feedback so
what we’re gonna do is take a look at this magazine cover and look at some
ways that it’s working well and look at how I would approach the design myself
as well as some things that we could do to improve this overall so we’re gonna
go ahead and dive in alright so let’s go and take a look at this so here is the
cover that she sent and it’s a great start there’s a lot of things that I
think are working well and there’s also some things that we’re gonna definitely
want to improve on so we’re just gonna start top-down and the first thing that
I notice is there’s three things that are competing for your visual attention
the first is the masthead across the top the fatherly logo or what we call the
masthead and we’ve got that in red letters bold at the top then one thing
you wouldn’t really think about but this architecture this building here is very
unique and because of its size it’s really commanding a lot of attention on
the page and then we have the father and son here down below now as you probably
know anytime you have a purse or you know a face on the cover of
anything as humans our eyes tend to get drawn towards their faces we’re trying
to read into their eyes and trying to decipher as much information as we can
from the photo so we’ve got this big red text this big building and then we’ve
got faces all competing for your first attention so what’s a little bit
confusing with this cover is when we zoom in close and look at this thing you
can tell that it’s obviously been kind of cut out and placed in this image so
what I would do is make it much bigger and so let’s go ahead and look at some
other magazine covers for inspiration or jump up here in the Safari we got some
magazine covers all right so if we look at these there’s really a couple
approaches one is you’ve got some covers where the masthead goes above the image
and is always above the image like Time magazine down here always has the time
logo over the forehead of the people on the cover and you’ve got some magazines
here like Forbes where you have this cutout where the head pops in front of
it actually here’s one more time did that as well so it just kind of depends
on the look you’re going for but by doing something like that you’ll notice
most of these images are substantially larger on the cover and not quite so
small down here in the bottom okay so that’s one thing I would do is I’d bring
up the the main image much larger now to do that this image looks kind of grainy
so you definitely want to start with a good image to begin with now this is the
cover so you should be able to find high quality photos for the cover of whatever
you’re doing if you don’t have one you need to make sure you get one because
it’s the first impression you’re dealing with so what I’m gonna do is go ahead
and let’s just make a new I’m just gonna build over the top of this one so this
is just an image I brought into Photoshop so we’re just gonna build over
the top and let’s just pretend like let’s start with a better image so I’m
gonna come back here and I already did a search for father and son here at pixels
comm this is a good one we’ll explore where I’m just gonna download this one
we’ll do that and let me scroll down a little bit here’s another good one this
one’s awesome that’s got some character he’s smiling they’re having fun that’s
another thing too like what is the facial what is the story telling you on
the face what’s the facial expression so that’s really important as well the nice
thing about this one were their backs are to us
it makes it a little more ambiguous to where it could be anybody it might be
more relational to somebody as far as your your target demographic is able to
relate to that person let’s go ahead and scroll through here just a little bit
more now what I’m looking for here’s a good one although his eyes are kind of
closed it’s a little blurry let’s find another one here what I’m looking for
now is so the one that we have here it’s it’s a little more they’re side-by-side
the one that I downloaded they’re stacked vertical so that actually could
be good for the layout of this magazine let’s just see here we’ve got these two
you know we’ll go ahead and work with these for now all right so first things
first let’s go ahead and drag these images in here just to get them started
it’ll scale it up all right all right so we got that one in here and I’m just
gonna bring the other one in while we’re at it all right so you got some some
really good photos to work with now this one already works really well it’s got
some nice negative space around the edges where I could drop it in some text
and the one below it actually same thing it’s nice and dark and I actually like
this one better because the trees behind it have some darker and the areas that
we can drop some text in over the top this one is nice but there’s some really
hot spots down here where it’s kind of blown out so I would either want to
maybe cut him out or select it and darken the background but if we’re
trying to work with just a photo this one might get us there better so we’ve
got that now the next thing I want to look at is just the amount of fonts we
have on here so we’ve got a sans serif font up here we’ve got the main masthead
which is another font so there’s two fonts this one looks like it’s different
than this one so we’re gonna call it three fonts so we’ve got all these and
then we’ve got this font here four so it’s pretty busy with fonts so we want
to try and narrow that down and make sure that we only have you know two
three fonts max to try and keep it from being too busy the next thing that I see
is we’ve got this lowercase turned out right tracked out and so for me I would
typically try and keep your your lowercase letters with regular kerning
or tracking because we don’t want it to don’t know it just for me it just feels
like everything’s really stretched-out so let’s go ahead and pay
it this a little bit more all right so for the sake of working fast what I’m
gonna do is actually select the fatherly text let’s go ahead and sample this
color I’m actually the magic wand tool and I want to sample I’m gonna turn off
contiguous what that means is it’s any color that it sees in this entire layer
it doesn’t have to be touching all right so I’m gonna click on that and now
pretty much just the fatherly text is selected with a little bit down here in
this Jersey so now I’m going to hit the letter M to get my rectangular marquee
and hold on the option key to click and array you to remove the selection from
here so now I have just the fatherly text I’ve got a new blank layer up here
and I’m gonna hit the letter I to get my eyedropper tool and we’re gonna sample
this color oh I got a Ben right layer here we go I went back to all layers
sample that layer now we’ve got that maroon burgundy color and I’m going to
turn off this layer behind it just to make sure I’ve got other selections
cleaned up here we’ve got some extra pixels here so we’re just gonna remove
that for my selection hit option delete to fill with my foreground color and now
I’ve got this fatherly text right on top I know it’s it’s we’re working fast and
loose here but so now we’ve got this that we can work with and let’s go ahead
and bring in that image that we were gonna play with here I’ll drop this in
scale it up and maybe even crop quite a bit here throw this behind the masthead
now you’re gonna have to decide on as far as the text here it’s difficult to
see so if your publication always has the same color you might have to change
how you work with things but what I’m gonna do is it actually changes to be
white so I’m going to lock the pixels on this layer what that does is now I can
fill this with a foreground color of white option delete and it’s gonna fill
just any pixel data so by locking this right here it’s gonna lock transparent
pixels so that way you can’t fill anything that’s transparent I hope that
makes sense it’s a really great shortcut you can use for just about anything all
right so we got that there now I’m gonna throw a mask on this layer and let’s see
how Photoshop does I’m gonna actually try
going to select and we’re gonna go to select subject and just see how
Photoshop does if it can see this photo it does a pretty stinking good job so
we’re gonna go ahead and run with that selection and maybe clean it up a tiny
bit I made the letter Q to get my quick mask tool going hit let her be to get my
brush and let’s make sure we’re painting with a nice soft brush here we are
alright and I’m just gonna clean this up quick we don’t want to get too crazy
with our selection just right now just trying to get through this tutorial
let’s see here and actually I don’t even need to make sure that I only need to
make sure that this selection up here is good so let’s turn the quick mask mode
back off real quick and selecting hair especially on this background can get
real tricky so let’s turn this off and just kind of take a look at this you
know let’s go ahead and I’m just gonna add to the selection with my lasso tool
just to kind of get it a little bit better here get it close at least
alright just cleaning things up and I’m not too worried in this in this case
here’s the deal we’re just trying to make it mask behind the letters here so
realistically all I need to make sure that’s good is right where he would pop
in front of these letters so I don’t need to worry too much about the
selection but what I’m gonna do is come up here with my selection like my lasso
tool selected and click select and mask and now what I can do is paint over with
my refine brush let’s see a selection tool the refine edge brush and we’re
just going to try and let Photoshop work its magic here and we’re just trying to make it look
realistic right where those letters are so I’m not gonna get too picky about the
rest of this but we’re kind of getting it close just trying to make Photoshop
do most of the little heavy lifting here we’ll click okay I’ll call it good for
now and now I’m gonna do is jump cut this selection to a new layer actually
and I can bring this text behind that of the layer I should have worked with a
mask but I’m just I’m just trying to go fast here guys so what we’re gonna do is
just take a look at that and that actually did a pretty stinkin good job
of knocking that behind the text and what I like about this is it just creeps
up just a little bit beyond the letters but you can still read most of the text
it’s cropped well he’s looking into the letters here and it really engages the
viewer all right so now I’m gonna do is let’s just go ahead and look at the
original real quick and you can see that we’ve got a lot of different stories and
we could easily feature all of them but what I’m gonna do is just grab a couple
of them so we are parenting 101 and maybe we’ll just kind of play with some
sizing here and we’re just gonna do a regular sans-serif just I don’t know
we’ll figure something out here now instead of leaving this I’m just
going to make this all caps I’m going to cut this command X to cut
it drag down a copy of this text the reason why I’m doing this is because I
want to be able to have be able to quickly grab and select these so let’s
drop this down here I want a little more space on the
right-hand side here so I’m gonna do is select we’ve got this layer sitting on
top I’m gonna select this one and the original image below it and we’re just
gonna drag it over a little bit which is nice that we’ve got the selection and
the two layers sitting on top because now we can just move it and it’s gonna
knock out those letters wherever we drop it so I’m thinking we’re gonna scoot it
over just a little bit so that way we’ve got the left edge just barely you know
touching over here we’ve got a little bit of margin a little bit of space but
that gave me more space down the right-hand side to kind of work with
this here so let’s go and again I like to break my text into a couple layers
because then I can really refine my edges or find my edges refine my type in
a way that feels a little more natural just to grab whichever one that I want
and scale it into place without having to try and mess the whole line at a time
all right hope that makes sense guys it’s not even 7:00 yet I am I’m needing
more coffee here all right there we go that’s looking good that’s better that’s
cool all right so I like how this works fits in this gap here parenting 101
let’s see what else could we grab let’s go back to the original cover kids
mental health signs to look out for alright let’s drop that in here sorry we’re using the same font but I’m
gonna change so within the font family we’ve got some different weight so I’m
gonna change this to regular just to kind of change this up a bit but still
keep it within the same font family and I’m playing with the guide down the
right-hand side here the alignment just to make this all look like it belongs
together and maybe let’s add one more story to this so bond over sports fun
activities to do through kids so bond over sports is nice in this magazine
cover because we’ve actually got some sports happening here in the background
but in the image that I threw on this cover obviously there’s no sports but it
looks like they’re having a fun activity so what we’re gonna do is grab fun
activities to do with your kids and I’m just going to clone this all right so let’s see how this lines up
here all right I’m going to align this to the right kind of getting that flush
right design layout here and I’m gonna call that good for the sake of this
tutorial so actually it’s cancel that there all right so that is what we ended
up with for the design now what I want to point out here on this compared to
the original let’s go ahead and pull up the original real quick so again with
the original we had a lot of stuff going on we got some you know the colors this
yellow stands out but it doesn’t really borrow any color from the photo we’ve
got this maroon color on the top we’ve got this you know kind of a lot going on
and I think that it’s important to remember that you can really simplify
things and break it down to the base you know the very basics in this case
all of my fonts are white all my text is white and I’m really letting the image
pop through on this now I could if I wanted to maybe sample some color so for
example I see we’ve got this kids shorts you know maybe we try and borrow that
color let’s just see if it works if I sample from the image that’s not bad
so by sampling a color directly from the image it helps it tie in it gives you a
little bit of something to work with but everything still feels like it belongs
together and and makes it feel cohesive and and on purpose with this other cover
I feel like there’s you know I don’t see anywhere else in the image where this
yellow color comes from and it kind of it just kind of feels like there’s a lot
going on so I hope that helps you know overall really great approach just just
tightening up some things like those fonts and keeping everything literally
we have two fonts we’ve got the masthead and then we’ve got this main font here
in open sans we’re just using bold and I think we’re using light here just to to
make it stand out a little bit and that’s everything like that’s all we did
kept it really really simple I hope that helps I know a little bit scattered
today I’ve got some flies flying around my office I’ve got the Sun in my eyes
barely had any coffee yet but it’s really important to me to try
and get back to you to the students who are asking me those questions in that QA
don’t forget to check out the website at Derek Mitchell comm where you can check
out that vault membership if you want to join in and want to be able to get
direct access to me and be able to ask questions like this where I can get back
to you and don’t forget if you liked the video hit the like button down below
subscribe tap the bell all the things and stay
tuned for the next tutorial so tired

Leave a Reply

Your email address will not be published. Required fields are marked *