(bright electronic music)
- [Gareth] Hello, and welcome to this video tutorial.
Gareth here from tastytuts.com.
In the last episode, we took the book cover design
we created over the previous seven videos,
and from that, we adapted the artwork
to create a web banner.
The original book cover was designed and created for print.
This web banner has been designed and prepared for digital.
We learned in a previous video how
to export design suitable for print.
In this tutorial, we are now going to learn
how we can export media for web.
So, here we are where we left off in the previous video.
Here we have our banner design here.
If you're completely new to this course
and would like to follow along,
you can find this file in the Final Artwork folder
in the project folder.
You can download this project folder for free.
The download link is in the description.
Now, in Photoshop, the process of exporting for web
is different compared to exporting for print.
Generally, when saving for web,
we need to keep in mind the file size of our graphics.
When exporting for print,
we always tend to output to the highest quality.
This is not always the case with web graphics
as we usually have a limit on file size.
With maximum image quality comes high image file sizes.
When exporting for web, we need to compress our images
to ensure that the graphics on the web
can be swiftly downloaded.
In Photoshop, when exporting for web,
we use a different function, the export for Web feature.
So, with my banner complete,
I am now going to save this for web.
So, I'll come up to File and click Save for Web.
Upon click, we will be presented with the Save for Web menu.
So, it's in this menu that we can specify
all the compression details and format the output
for our file ready for web.
So, on the left, we can see a preview of our artwork.
This is here to show us
what the visual quality will look like once we export.
Also, it's important to keep an eye
on the bottom left of this menu.
This will specify the file image size
that the exported image will be to the current settings.
Over on the right, we have an array of options
which we can customize.
What you will soon see is that there are a lot of settings
we can toggle to optimize our file here.
So, let's start from the top.
So, the first tab here is Presets.
If we click this, we can see an array of presets
for us to choose from.
As I click these, we will notice the values change below
and also the visual preview to the left.
Now, if we come back over to the left
and look at the top tabs,
we have a few to choose from.
From here, I'll choose 2-Up.
This will now show two previews in the window.
We have the original example and the preview
of what the visual quality will be upon exporting.
This is useful, as we can compare the quality.
On this occasion, I'm going to set myself
some precise values.
So, I will not be using any of these presets here.
So, below on the next tab, we can choose the file extension
we wish to use.
From here, we can see .GIF, .JPEG, .PNG, and so on.
Now, it all depends on the nature of our image
and what we intend it to be or be used for.
If my image has transparency, an alpha channel,
then I would certainly be using the .PNG or GIF extension.
Though, because this is a solid image,
we will need to use either a .JPEG or .GIF.
Notice as I toggle between JPEG and GIF,
we get a different level of quality
and also a different file image size in the bottom left.
Depending on which format you choose,
you will have various settings to toggle.
If I choose .GIF, we have an array of options.
Here we can even specify exactly how many colors
we wish to use.
This generally helps ensure a lower image file size,
though at the cost of quality.
When exporting for web, you really have to strike a balance
between quality and image size.
If I choose JPEG, we can see that the overall quality
is smoother, though the image file size is a little larger.
Here, unlike specifying colors,
I can specify the compression quality.
So, on this occasion, I'll use JPEG,
as I will get a smoother end result.
So, from the tabs below,
I can easily choose Low to High compression.
Notice as I toggle between these,
the visual quality will change
and also the estimated file image size below.
To the right of this tab, we can be more specific
about the compression.
Here, I can type in a value from zero to 100.
If I type in 10, we can see that this file
will be around eight kilobytes,
but the quality here is not looking too good.
If I type in 90, we can see that the quality has improved.
It's not far off the original, and the file image size
will be around 63 kilobytes.
So, when exporting for web,
you really have to strike a balance
between quality and image size.
Now, on this occasion, there is a limit.
I need to get my web banner under 45 kilobytes.
Anything above this will be unacceptable.
Now, there is another way we can be more precise
about our compression.
If I come up to the top right here and click the menu,
upon click, we have an option here
called Optimize File Size.
Upon click, a menu will appear.
So, in the Desired File Size, I'll type in 44,
as I need to provide the banner under 45 kilobytes.
So, with 44 entered, I'll click OK.
Upon click, the settings will optimize for my file
to be around 44 kilobytes.
Now, if we look over to the left,
we can see that the compression is looking good.
The visual quality is not far from the original,
and down on the bottom left, we can see the file image size
will be around 43 kilobytes.
So, once I'm happy with the visual quality of the image
and the file image size, I'll click Save.
Upon click, we will be presented with the usual menu.
So, I'll navigate to MY PROJECT folder.
I'll rename the file to PAPER_FRIENDS_BANNER
and click Save.
Upon click, that will save the banner.
Now, if I navigate to MY PROJECT folder,
we will see the JPEG file which has been optimized for web
to the correct file size
and is now ready to be uploaded for the web.
So, that, my friends, completes this Beginner's Guide
to Adobe Photoshop.
I truly hope you have enjoyed this series.
If you were not familiar with Photoshop before this course,
I hope I have helped you get up to speed
with some of the basics
to help you create your own artwork in future.
If you liked the course, please subscribe to the channel.
There will be lots more content like this in future.
So, don't miss out on that.
If you liked the course, go ahead and click the Like button
on my Facebook page and even add me as a friend.
Be sure to share this course with your friends
who also may be interested in learning Photoshop.
If you wish to hear about more up and coming video tutorials
and general creative news and updates,
you can follow me on Twitter,
and, of course, check out and subscribe for free
to the tastytuts.com website.
Well, that's it for another video
brought to you by tastytuts.com.
My name is Gareth David.
Have fun, guys, and I'll see you next time.
(energetic electronic music)