In this video we'll get back into a little graphic design by editing the book cover PTSD or Photoshop
image provided by Studio press with the author pro theme as a Photoshop document.
The image has layers which are used for creating and adjusting images and graphics in Photoshop and
other image editing software.
The bookbinding layer is a transparent overlay which allows you to replace the cover image and still
have the left side look like a book by the end of this video you'll have edited the SD file changing
the cover image and title and exported a web ready image for your author pro web site using either Photoshop
or a free image editing program.
You've probably noticed that these book images have this kind of binding fold over look on the left
hand side.
Now these weren't created individually.
It was an overlay using a Photoshop document that makes these different cover images appear as if they're
folded as in they have a book binding.
Let's take a look at one of the images in the Wordpress dashboard inside of the media library.
Open the media library.
Scroll down to where we have some of these book images.
Click on this one.
It's looking like it's 720 pixels by 11 40 and we know that there's a specific proportional size that
these need to be so that the cover doesn't get cut off with any cropping.
And there's also a let's see if we go and look under appearance widgets.
We've gone through in this chapter and used the author pro feature book widget set up front page too.
But if we look at one of these widgets we can see that the author pro image thumbnail that created is
360 by 5 70.
Now your theme demo content as you remember was downloaded from your theme.
Demo files link at the top of any of your Wordpress dashboards and so in Photoshop I placed it on my
desktop.
I got a demo content files folder that I unzipped from the zip file and as a folder now called graphics
and assets and then there's a book cover PTSD or dat PTSD image file.
Now if I open this up you can see that it's four point six nine megabytes and we're just going to go
ahead and open that up inside a folder.
Photoshop and I told it to keep the layers.
It's telling me that some of the text layers have missing fonts and that's ok it's just because the
studio press folks used a certain font and I don't have this font installed on my computer.
You can go ahead and just if you double click on the font or error icon here it'll say that substitution
will occur and that happens if you try to edit the layer.
And so if I'd want to edit this layer as well it's going to substitute a font for me and I can change
and use any of the fonts that I have installed on my computer from Photoshop.
So now if I have an author name and a book title name there is an image behind.
And I also have this cover which you could see as kind of a layer that has an effect on it called a
gradient overlay.
Now if I get rid of that gradient overlay you can see that it removed the kind of highlighting that
was a transparent bookbinding image on the left hand side.
So I just click that to make it appear back again and that's what we're working with.
Let's look at the size of the image.
It's 720 by 11:40 just like we saw inside of our media library.
And if I go back inside of my widget area here and I look at what the thumbnail size is going to be
570 by three 60.
So if I make that with 360 you can see that the height would be 570.
So the thumbnail size has been created because it's proportional with the size of the original graphic
here.
Now this is inside Photoshop and I mentioned that that image was almost 5 megabytes.
If you have Photoshop you can open up the file of any size.
Now inside the browser we've been working with a browser based image editing software called Bixler.
If you remember Pichler we had the Pichler editor and we use that for compressing and adjusting images
for the web.
So the file size was smaller and the image size was smaller.
One problem with the pixel or browser based editor is that you can't open up the file that's bigger
than 3 megabytes and so I found another image editor called Photo P photo PDA and this is what it looks
like when you open up photo P dot com and it's able to open any size.
P.S. defile.
So I might just take.
File.
Hit file and click open.
Inside of photo P.
Now go into my demo content files folder graphics and assets and if I open that book cover what we want
is to make sure that we can maintain the layers inside of the image so that when we're working with
an image the layers are available to us.
We can see this gradient overlay and what we want is to place a new cover image which is this layer
here underneath the gradient overlay or this layer here called cover.
And that way no matter what image we have on our book cover it's going to show a nice imitation of a
bookbinding here on the left hand side.
Now whether you use photo P or you have Photoshop.
If you do have it Photoshop is quicker and a little bit better of a program probably faster to work
with.
So I'm going to be using Photoshop but in either case you can use either program to work with your P.S.
d file but what you'll be doing is adding an additional image here for the cover image.
First of all I'll open another image within Photoshop.
That's going to come from my graphics and assets folder within the demo content files folder again.
This one is a large image that we've used before and we used it in our brochure site originally at the
beginning of the course.
So now if I take this image and I want to put it into this Photoshop document first thing I have to
do in Photoshop is to unlock this layer or I could duplicate it and then pull this layer across and
add it to this other image up here which I have in another tab.
Now double click this little lock symbol and then I can hit OK.
That just unlocks this layer so that if I have my indicator tool here I can move this layer and drag
it over over to this other image I have open and then let it go here.
What that does is it makes another layer basically move that layer from this image and it copied it
over to my other document.
So now I can move this around.
This is on top of the cover cover image layer.
If you did pull it in and it was below the cover image you wouldn't see it because this layer is underneath
the cover image layer.
You can either change the order of your layers or you can use the little eye to make this one disappear.
That might just open my history panel and just go back to where I was that layers in a good place for
me and so with this selected I can drag my image around and you can see that my image is actually not
quite tall enough
I'm going to move it down until it's even with the bottom and then I have something going on up here
first.
The image isn't quite large enough so I have a white color a little stripe at the top.
I don't want to just trim that because I need to preserve the size and proportions of my book title
image here.
I also think that the image is a little bit dark to have the title coming out and looking good.
So here's a little trick.
I'm going to make an additional layer I have layer 1 selected and I'll click this little add layer button.
So here on Layer 2 I'm going to use a little bit of a gradient.
So if I use the marquee tool I'm going to select a certain area of my image right here.
So from about here up what I want to do is have this image gradually fade up into just a clear area
up here.
So over here where under the fill tool if you hold down and drag across there is something called the
gradient tool.
And now it's going to use the colors or different patterns that you have here.
I'm going to switch this to black and white.
First of all and I want to choose my pattern.
I want it actually to go from the from the foreground color to a clear or transparent background here.
And so what I really want is to switch these tips so that I have white and I want to change this to
from white to transparent.
And now once I have that selected I can drag a line from here all the way down if I hold shift it will
bring it in a straight line from the very beginning of my area here.
Now what it did was it faded out my image until it got to white which is the color the background up
here.
I think that looks good.
So click once to get rid of my square there and now what I'm going to do is move my book title up just
a little bit and edit itself.
I just move this up again a hold shift that stays aligned to the right hand side.
Great book title and then author name down here.
That looks pretty good except I'll double click here to select the lettering and go up here.
I'd like this to be just a solid black.
So it shows up really well against whatever image I have down there.
I need to change the color of the lettering or change the color of the background down here.
If that didn't contrast well and you couldn't read the author name.
So now that I have this book image ready to go I remember I have a layer that has this gradient so that
I could use as dark of an image as I want and as long as that layer is in place it'll gradually fade
out the image so that the title can come out looking good.
So what I would do here is first just save my document so that I save my changes then I'm going to hit
save for web and devices as we're used to doing.
And this I'll probably use a j peg because this is a photograph.
I want it to be coming out nice and clear and with medium quality looks really good.
I think I go high quality.
See that's 85 K in file size 166 isn't bad either.
So that makes it look even better.
Took away some of the little graphical errors around the author name that looks really good.
So hit save.
Choose a place to save it.
I'm going to go to my desktop again.
And I've created another folder there called Author pro for the site that I'm working on now and I'm
just going to save this book cover to just so that I can have a good label of it as a jpeg image.
And that's a nice small size.
Now when I go into my wordpress dashboard if I want to bring this into one of the books in the library
when I upload it into the media library it's going to make that correct.
Author pro thumbnail size.
It's going to be proportional from this book size that I got from here.
So if I just bring Let's see use midnight on earth I'll just change the featured image I'll just remove
the featured image right here and then I'll set a featured image by uploading the file upload it from
the desktop inside.
Author pro folder I made.
And there it is.
Open this file comes in very quickly it's only 166 K and I'll set the featured image by holding the
blue button.
There it is.
And don't forget to hit update on the page itself.
There we go.
OK now if I open up my site and I hit midnight on Earth of course this isn't refresh refresh the page
on the home page.
Here is my new book cover and it has the nice overlay here.
And if I hit the individual book page I can see a larger version that looks great something seeing one
little problem about how I created that gradient on my new book cover image and that is that I've created
it so that it fades right back into a perfectly white color which basically disappears into the background
of the Web site here.
So I think I want to make this background color just us very very light gray so that it shows a border
here at the top of the book itself.
I'll just make that quick change within Photoshop.
I think if I make this cover layer I what I need is a layer that is beneath the gradient layer and actually
beneath the actual image.
But on top of the cover image gradient and you layer that's going to be maybe red on top of here.
Let's see choose there and then choose a new layer layer 3.
I'm going to choose a color that's going to be just a very light
that's fine.
And I'm going to fill that so I'm going to hold down and change to the pink book at two and then I'll
you know if I want to phone to see what's going on I'll just make that image later disappear for a quick
second and I have layer 3 selected and I'll just click that layer on there.
There we go.
And there's the gradient and the rest of the book up here.
So if I make that appear it doesn't look super great does it.
It means that I have to make my gradient match that color as well.
So let's go back up here and layer two is where my other gradient was and I'm just going to put it right
on top using this foreground color that's not white anymore so that it matches just loops.
Now place this
once they go right against my ruler doesn't it just move that little guideline up just a little bit.
You know you go stick it red about here and fade it from clear.
So I want to go back to the gradient tool I'm using again and I'm going to drop it back down from here
using the shift key
under that end and there we go that's going to look much better to fade into a nice beige color for
the book title and it'll appear on top of a white background.
Very very well.
So layer two is there one thing you can do is just label your layers so that you can you know what they
are Whoops I don't want to put a special effect on it later I just run rename it.
This one is just background color go now hit control S and that saves document as a Photoshop document.
But I want to receive it with a different background color 163 cake rate.
Save this and I'm going to carve the same name and overwrite book Cover 2 and hit replace.
Right now I have to go back into Wordpress and I want to go you know what I'll do is go into the media
library this time.
Now before I'm just going to delete this image permanently because it's the same file name so now when
I add this new image you can use.
There it is.
Book cover to and then when I go into the library where I have my books I'll open at midnight on Earth
book and
since I deleted the image before it no longer has a featured image I'll have to set that featured image
choose the one I just uploaded.
You can already see that it's got a little bit of color so you can see the top edge of the book against
a white background.
So if I hit update and let's go back to the home page and we can see here it looks much better you can
see the top edge of the book great.
That looks great.
In this lesson you opened the book cover dot BSD Photoshop as the file and worked with the layers so
that you could create more book covers for the site.
Preserving the overlay of the left side bookbinding layer in each image and I showed you a couple of
graphic design techniques that you'll find useful for working with images for Web sites.
In the next video we'll wrap up this chapter by changing the Web site to a completely different theme.
Preserving all the data from the author pro plug in and revealing how it can be displayed in any Genesys
theme.