1
00:00:00,630 --> 00:00:06,710
In this video we'll get back into a little graphic design by editing the book cover PTSD or Photoshop

2
00:00:06,750 --> 00:00:12,000
image provided by Studio press with the author pro theme as a Photoshop document.

3
00:00:12,000 --> 00:00:17,760
The image has layers which are used for creating and adjusting images and graphics in Photoshop and

4
00:00:17,760 --> 00:00:19,730
other image editing software.

5
00:00:19,800 --> 00:00:25,230
The bookbinding layer is a transparent overlay which allows you to replace the cover image and still

6
00:00:25,230 --> 00:00:31,170
have the left side look like a book by the end of this video you'll have edited the SD file changing

7
00:00:31,170 --> 00:00:38,070
the cover image and title and exported a web ready image for your author pro web site using either Photoshop

8
00:00:38,250 --> 00:00:40,180
or a free image editing program.

9
00:00:40,890 --> 00:00:47,400
You've probably noticed that these book images have this kind of binding fold over look on the left

10
00:00:47,400 --> 00:00:48,680
hand side.

11
00:00:48,690 --> 00:00:50,680
Now these weren't created individually.

12
00:00:50,730 --> 00:00:56,220
It was an overlay using a Photoshop document that makes these different cover images appear as if they're

13
00:00:56,220 --> 00:00:59,380
folded as in they have a book binding.

14
00:00:59,550 --> 00:01:05,550
Let's take a look at one of the images in the Wordpress dashboard inside of the media library.

15
00:01:05,550 --> 00:01:07,470
Open the media library.

16
00:01:07,470 --> 00:01:12,350
Scroll down to where we have some of these book images.

17
00:01:12,390 --> 00:01:13,860
Click on this one.

18
00:01:13,950 --> 00:01:23,180
It's looking like it's 720 pixels by 11 40 and we know that there's a specific proportional size that

19
00:01:23,190 --> 00:01:27,560
these need to be so that the cover doesn't get cut off with any cropping.

20
00:01:27,840 --> 00:01:34,110
And there's also a let's see if we go and look under appearance widgets.

21
00:01:34,140 --> 00:01:40,110
We've gone through in this chapter and used the author pro feature book widget set up front page too.

22
00:01:40,230 --> 00:01:45,960
But if we look at one of these widgets we can see that the author pro image thumbnail that created is

23
00:01:45,960 --> 00:01:49,810
360 by 5 70.

24
00:01:49,880 --> 00:01:54,890
Now your theme demo content as you remember was downloaded from your theme.

25
00:01:54,890 --> 00:02:01,520
Demo files link at the top of any of your Wordpress dashboards and so in Photoshop I placed it on my

26
00:02:01,700 --> 00:02:02,460
desktop.

27
00:02:02,570 --> 00:02:09,740
I got a demo content files folder that I unzipped from the zip file and as a folder now called graphics

28
00:02:09,800 --> 00:02:16,710
and assets and then there's a book cover PTSD or dat PTSD image file.

29
00:02:16,730 --> 00:02:22,460
Now if I open this up you can see that it's four point six nine megabytes and we're just going to go

30
00:02:22,460 --> 00:02:24,890
ahead and open that up inside a folder.

31
00:02:24,980 --> 00:02:27,830
Photoshop and I told it to keep the layers.

32
00:02:27,860 --> 00:02:33,350
It's telling me that some of the text layers have missing fonts and that's ok it's just because the

33
00:02:33,350 --> 00:02:40,370
studio press folks used a certain font and I don't have this font installed on my computer.

34
00:02:40,400 --> 00:02:46,730
You can go ahead and just if you double click on the font or error icon here it'll say that substitution

35
00:02:46,730 --> 00:02:50,750
will occur and that happens if you try to edit the layer.

36
00:02:50,750 --> 00:02:57,110
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

37
00:02:57,320 --> 00:03:03,510
and use any of the fonts that I have installed on my computer from Photoshop.

38
00:03:03,750 --> 00:03:09,420
So now if I have an author name and a book title name there is an image behind.

39
00:03:09,540 --> 00:03:16,590
And I also have this cover which you could see as kind of a layer that has an effect on it called a

40
00:03:16,590 --> 00:03:18,500
gradient overlay.

41
00:03:18,500 --> 00:03:23,820
Now if I get rid of that gradient overlay you can see that it removed the kind of highlighting that

42
00:03:23,820 --> 00:03:28,010
was a transparent bookbinding image on the left hand side.

43
00:03:28,230 --> 00:03:32,940
So I just click that to make it appear back again and that's what we're working with.

44
00:03:32,940 --> 00:03:35,470
Let's look at the size of the image.

45
00:03:35,570 --> 00:03:39,880
It's 720 by 11:40 just like we saw inside of our media library.

46
00:03:40,230 --> 00:03:46,980
And if I go back inside of my widget area here and I look at what the thumbnail size is going to be

47
00:03:47,490 --> 00:03:51,640
570 by three 60.

48
00:03:51,740 --> 00:03:57,530
So if I make that with 360 you can see that the height would be 570.

49
00:03:57,720 --> 00:04:04,110
So the thumbnail size has been created because it's proportional with the size of the original graphic

50
00:04:04,110 --> 00:04:04,620
here.

51
00:04:05,710 --> 00:04:11,370
Now this is inside Photoshop and I mentioned that that image was almost 5 megabytes.

52
00:04:11,680 --> 00:04:15,940
If you have Photoshop you can open up the file of any size.

53
00:04:15,940 --> 00:04:23,780
Now inside the browser we've been working with a browser based image editing software called Bixler.

54
00:04:24,010 --> 00:04:30,430
If you remember Pichler we had the Pichler editor and we use that for compressing and adjusting images

55
00:04:30,640 --> 00:04:31,510
for the web.

56
00:04:31,510 --> 00:04:35,290
So the file size was smaller and the image size was smaller.

57
00:04:35,290 --> 00:04:41,890
One problem with the pixel or browser based editor is that you can't open up the file that's bigger

58
00:04:41,890 --> 00:04:50,560
than 3 megabytes and so I found another image editor called Photo P photo PDA and this is what it looks

59
00:04:50,560 --> 00:04:56,560
like when you open up photo P dot com and it's able to open any size.

60
00:04:56,560 --> 00:04:58,050
P.S. defile.

61
00:04:58,040 --> 00:04:59,020
So I might just take.

62
00:04:59,020 --> 00:05:00,140
File.

63
00:05:00,240 --> 00:05:01,680
Hit file and click open.

64
00:05:01,690 --> 00:05:03,440
Inside of photo P.

65
00:05:03,490 --> 00:05:11,200
Now go into my demo content files folder graphics and assets and if I open that book cover what we want

66
00:05:11,200 --> 00:05:17,380
is to make sure that we can maintain the layers inside of the image so that when we're working with

67
00:05:17,380 --> 00:05:20,740
an image the layers are available to us.

68
00:05:20,770 --> 00:05:26,830
We can see this gradient overlay and what we want is to place a new cover image which is this layer

69
00:05:26,830 --> 00:05:32,050
here underneath the gradient overlay or this layer here called cover.

70
00:05:32,170 --> 00:05:38,200
And that way no matter what image we have on our book cover it's going to show a nice imitation of a

71
00:05:38,230 --> 00:05:40,560
bookbinding here on the left hand side.

72
00:05:42,290 --> 00:05:45,810
Now whether you use photo P or you have Photoshop.

73
00:05:45,810 --> 00:05:52,020
If you do have it Photoshop is quicker and a little bit better of a program probably faster to work

74
00:05:52,020 --> 00:05:52,570
with.

75
00:05:52,590 --> 00:05:59,010
So I'm going to be using Photoshop but in either case you can use either program to work with your P.S.

76
00:05:59,010 --> 00:06:05,520
d file but what you'll be doing is adding an additional image here for the cover image.

77
00:06:05,520 --> 00:06:09,420
First of all I'll open another image within Photoshop.

78
00:06:09,490 --> 00:06:15,370
That's going to come from my graphics and assets folder within the demo content files folder again.

79
00:06:15,440 --> 00:06:21,180
This one is a large image that we've used before and we used it in our brochure site originally at the

80
00:06:21,180 --> 00:06:23,170
beginning of the course.

81
00:06:23,250 --> 00:06:31,050
So now if I take this image and I want to put it into this Photoshop document first thing I have to

82
00:06:31,050 --> 00:06:38,640
do in Photoshop is to unlock this layer or I could duplicate it and then pull this layer across and

83
00:06:38,670 --> 00:06:42,340
add it to this other image up here which I have in another tab.

84
00:06:42,660 --> 00:06:46,110
Now double click this little lock symbol and then I can hit OK.

85
00:06:46,200 --> 00:06:52,770
That just unlocks this layer so that if I have my indicator tool here I can move this layer and drag

86
00:06:52,770 --> 00:06:58,750
it over over to this other image I have open and then let it go here.

87
00:06:59,100 --> 00:07:06,260
What that does is it makes another layer basically move that layer from this image and it copied it

88
00:07:06,260 --> 00:07:08,820
over to my other document.

89
00:07:09,780 --> 00:07:11,520
So now I can move this around.

90
00:07:11,520 --> 00:07:14,850
This is on top of the cover cover image layer.

91
00:07:14,880 --> 00:07:21,690
If you did pull it in and it was below the cover image you wouldn't see it because this layer is underneath

92
00:07:21,750 --> 00:07:23,160
the cover image layer.

93
00:07:23,160 --> 00:07:29,750
You can either change the order of your layers or you can use the little eye to make this one disappear.

94
00:07:30,550 --> 00:07:36,610
That might just open my history panel and just go back to where I was that layers in a good place for

95
00:07:36,610 --> 00:07:43,780
me and so with this selected I can drag my image around and you can see that my image is actually not

96
00:07:43,780 --> 00:07:45,980
quite tall enough

97
00:07:49,320 --> 00:07:56,240
I'm going to move it down until it's even with the bottom and then I have something going on up here

98
00:07:56,240 --> 00:07:56,550
first.

99
00:07:56,610 --> 00:08:00,690
The image isn't quite large enough so I have a white color a little stripe at the top.

100
00:08:00,720 --> 00:08:05,520
I don't want to just trim that because I need to preserve the size and proportions of my book title

101
00:08:05,520 --> 00:08:06,530
image here.

102
00:08:06,540 --> 00:08:12,510
I also think that the image is a little bit dark to have the title coming out and looking good.

103
00:08:12,510 --> 00:08:14,220
So here's a little trick.

104
00:08:14,290 --> 00:08:20,130
I'm going to make an additional layer I have layer 1 selected and I'll click this little add layer button.

105
00:08:20,150 --> 00:08:25,070
So here on Layer 2 I'm going to use a little bit of a gradient.

106
00:08:25,080 --> 00:08:33,890
So if I use the marquee tool I'm going to select a certain area of my image right here.

107
00:08:34,050 --> 00:08:44,630
So from about here up what I want to do is have this image gradually fade up into just a clear area

108
00:08:44,630 --> 00:08:45,510
up here.

109
00:08:45,520 --> 00:08:50,190
So over here where under the fill tool if you hold down and drag across there is something called the

110
00:08:50,190 --> 00:08:51,560
gradient tool.

111
00:08:51,810 --> 00:08:55,530
And now it's going to use the colors or different patterns that you have here.

112
00:08:55,530 --> 00:08:59,460
I'm going to switch this to black and white.

113
00:08:59,470 --> 00:09:02,970
First of all and I want to choose my pattern.

114
00:09:02,980 --> 00:09:12,670
I want it actually to go from the from the foreground color to a clear or transparent background here.

115
00:09:12,730 --> 00:09:19,940
And so what I really want is to switch these tips so that I have white and I want to change this to

116
00:09:20,570 --> 00:09:24,000
from white to transparent.

117
00:09:24,080 --> 00:09:34,780
And now once I have that selected I can drag a line from here all the way down if I hold shift it will

118
00:09:34,780 --> 00:09:39,850
bring it in a straight line from the very beginning of my area here.

119
00:09:40,030 --> 00:09:46,720
Now what it did was it faded out my image until it got to white which is the color the background up

120
00:09:46,720 --> 00:09:47,560
here.

121
00:09:47,560 --> 00:09:49,020
I think that looks good.

122
00:09:49,370 --> 00:09:56,230
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

123
00:09:56,230 --> 00:09:58,390
a little bit and edit itself.

124
00:09:58,420 --> 00:10:04,650
I just move this up again a hold shift that stays aligned to the right hand side.

125
00:10:04,810 --> 00:10:08,110
Great book title and then author name down here.

126
00:10:08,110 --> 00:10:13,510
That looks pretty good except I'll double click here to select the lettering and go up here.

127
00:10:13,510 --> 00:10:16,350
I'd like this to be just a solid black.

128
00:10:16,510 --> 00:10:20,800
So it shows up really well against whatever image I have down there.

129
00:10:21,070 --> 00:10:26,610
I need to change the color of the lettering or change the color of the background down here.

130
00:10:26,680 --> 00:10:30,200
If that didn't contrast well and you couldn't read the author name.

131
00:10:30,670 --> 00:10:38,410
So now that I have this book image ready to go I remember I have a layer that has this gradient so that

132
00:10:38,410 --> 00:10:44,980
I could use as dark of an image as I want and as long as that layer is in place it'll gradually fade

133
00:10:44,980 --> 00:10:49,210
out the image so that the title can come out looking good.

134
00:10:49,210 --> 00:10:55,230
So what I would do here is first just save my document so that I save my changes then I'm going to hit

135
00:10:55,250 --> 00:10:58,410
save for web and devices as we're used to doing.

136
00:10:58,630 --> 00:11:01,710
And this I'll probably use a j peg because this is a photograph.

137
00:11:01,730 --> 00:11:07,510
I want it to be coming out nice and clear and with medium quality looks really good.

138
00:11:07,510 --> 00:11:09,720
I think I go high quality.

139
00:11:09,760 --> 00:11:15,690
See that's 85 K in file size 166 isn't bad either.

140
00:11:15,700 --> 00:11:17,720
So that makes it look even better.

141
00:11:17,740 --> 00:11:23,100
Took away some of the little graphical errors around the author name that looks really good.

142
00:11:23,230 --> 00:11:24,300
So hit save.

143
00:11:24,310 --> 00:11:26,330
Choose a place to save it.

144
00:11:26,350 --> 00:11:28,270
I'm going to go to my desktop again.

145
00:11:29,520 --> 00:11:34,270
And I've created another folder there called Author pro for the site that I'm working on now and I'm

146
00:11:34,270 --> 00:11:40,420
just going to save this book cover to just so that I can have a good label of it as a jpeg image.

147
00:11:40,570 --> 00:11:43,420
And that's a nice small size.

148
00:11:43,420 --> 00:11:53,970
Now when I go into my wordpress dashboard if I want to bring this into one of the books in the library

149
00:11:54,630 --> 00:11:58,620
when I upload it into the media library it's going to make that correct.

150
00:11:58,620 --> 00:12:00,270
Author pro thumbnail size.

151
00:12:00,420 --> 00:12:04,190
It's going to be proportional from this book size that I got from here.

152
00:12:04,230 --> 00:12:14,930
So if I just bring Let's see use midnight on earth I'll just change the featured image I'll just remove

153
00:12:14,930 --> 00:12:22,740
the featured image right here and then I'll set a featured image by uploading the file upload it from

154
00:12:22,830 --> 00:12:26,210
the desktop inside.

155
00:12:26,210 --> 00:12:27,660
Author pro folder I made.

156
00:12:27,770 --> 00:12:29,290
And there it is.

157
00:12:29,480 --> 00:12:36,200
Open this file comes in very quickly it's only 166 K and I'll set the featured image by holding the

158
00:12:36,200 --> 00:12:37,320
blue button.

159
00:12:37,340 --> 00:12:37,910
There it is.

160
00:12:37,910 --> 00:12:41,990
And don't forget to hit update on the page itself.

161
00:12:41,990 --> 00:12:43,230
There we go.

162
00:12:43,550 --> 00:12:49,910
OK now if I open up my site and I hit midnight on Earth of course this isn't refresh refresh the page

163
00:12:50,540 --> 00:12:51,950
on the home page.

164
00:12:51,970 --> 00:12:56,040
Here is my new book cover and it has the nice overlay here.

165
00:12:56,290 --> 00:13:04,650
And if I hit the individual book page I can see a larger version that looks great something seeing one

166
00:13:04,650 --> 00:13:11,370
little problem about how I created that gradient on my new book cover image and that is that I've created

167
00:13:11,370 --> 00:13:18,120
it so that it fades right back into a perfectly white color which basically disappears into the background

168
00:13:18,180 --> 00:13:19,600
of the Web site here.

169
00:13:19,620 --> 00:13:26,010
So I think I want to make this background color just us very very light gray so that it shows a border

170
00:13:26,010 --> 00:13:28,480
here at the top of the book itself.

171
00:13:28,500 --> 00:13:30,870
I'll just make that quick change within Photoshop.

172
00:13:30,870 --> 00:13:41,580
I think if I make this cover layer I what I need is a layer that is beneath the gradient layer and actually

173
00:13:41,580 --> 00:13:43,190
beneath the actual image.

174
00:13:43,200 --> 00:13:49,300
But on top of the cover image gradient and you layer that's going to be maybe red on top of here.

175
00:13:50,730 --> 00:13:55,700
Let's see choose there and then choose a new layer layer 3.

176
00:13:55,760 --> 00:13:59,420
I'm going to choose a color that's going to be just a very light

177
00:14:02,300 --> 00:14:03,160
that's fine.

178
00:14:04,800 --> 00:14:10,050
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

179
00:14:10,300 --> 00:14:16,680
you know if I want to phone to see what's going on I'll just make that image later disappear for a quick

180
00:14:16,680 --> 00:14:21,730
second and I have layer 3 selected and I'll just click that layer on there.

181
00:14:21,870 --> 00:14:22,470
There we go.

182
00:14:22,470 --> 00:14:25,570
And there's the gradient and the rest of the book up here.

183
00:14:25,710 --> 00:14:30,850
So if I make that appear it doesn't look super great does it.

184
00:14:30,850 --> 00:14:35,580
It means that I have to make my gradient match that color as well.

185
00:14:35,580 --> 00:14:41,340
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

186
00:14:41,340 --> 00:14:49,620
on top using this foreground color that's not white anymore so that it matches just loops.

187
00:14:50,360 --> 00:14:51,700
Now place this

188
00:14:54,740 --> 00:15:03,870
once they go right against my ruler doesn't it just move that little guideline up just a little bit.

189
00:15:04,040 --> 00:15:10,450
You know you go stick it red about here and fade it from clear.

190
00:15:10,460 --> 00:15:16,070
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

191
00:15:16,070 --> 00:15:17,150
using the shift key

192
00:15:20,140 --> 00:15:26,520
under that end and there we go that's going to look much better to fade into a nice beige color for

193
00:15:26,520 --> 00:15:29,560
the book title and it'll appear on top of a white background.

194
00:15:29,670 --> 00:15:30,630
Very very well.

195
00:15:30,690 --> 00:15:39,210
So layer two is there one thing you can do is just label your layers so that you can you know what they

196
00:15:39,210 --> 00:15:47,050
are Whoops I don't want to put a special effect on it later I just run rename it.

197
00:15:47,050 --> 00:15:58,960
This one is just background color go now hit control S and that saves document as a Photoshop document.

198
00:15:59,000 --> 00:16:05,180
But I want to receive it with a different background color 163 cake rate.

199
00:16:05,200 --> 00:16:13,020
Save this and I'm going to carve the same name and overwrite book Cover 2 and hit replace.

200
00:16:13,060 --> 00:16:21,220
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

201
00:16:21,220 --> 00:16:22,970
library this time.

202
00:16:23,140 --> 00:16:31,410
Now before I'm just going to delete this image permanently because it's the same file name so now when

203
00:16:31,410 --> 00:16:35,310
I add this new image you can use.

204
00:16:35,310 --> 00:16:35,790
There it is.

205
00:16:35,790 --> 00:16:45,800
Book cover to and then when I go into the library where I have my books I'll open at midnight on Earth

206
00:16:45,800 --> 00:16:46,550
book and

207
00:16:49,630 --> 00:16:54,580
since I deleted the image before it no longer has a featured image I'll have to set that featured image

208
00:16:55,210 --> 00:16:57,020
choose the one I just uploaded.

209
00:16:58,520 --> 00:17:03,710
You can already see that it's got a little bit of color so you can see the top edge of the book against

210
00:17:03,770 --> 00:17:05,050
a white background.

211
00:17:05,270 --> 00:17:14,730
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

212
00:17:14,730 --> 00:17:19,410
see the top edge of the book great.

213
00:17:19,400 --> 00:17:20,240
That looks great.

214
00:17:21,290 --> 00:17:28,010
In this lesson you opened the book cover dot BSD Photoshop as the file and worked with the layers so

215
00:17:28,010 --> 00:17:30,710
that you could create more book covers for the site.

216
00:17:30,710 --> 00:17:37,250
Preserving the overlay of the left side bookbinding layer in each image and I showed you a couple of

217
00:17:37,250 --> 00:17:42,530
graphic design techniques that you'll find useful for working with images for Web sites.

218
00:17:42,530 --> 00:17:47,490
In the next video we'll wrap up this chapter by changing the Web site to a completely different theme.

219
00:17:47,570 --> 00:17:52,930
Preserving all the data from the author pro plug in and revealing how it can be displayed in any Genesys

220
00:17:52,930 --> 00:17:53,380
theme.