Save for web in Adobe Photoshop Ep33/33 [Adobe Photoshop for Beginners]

Save for web in Adobe Photoshop Ep33/33 [Adobe Photoshop for Beginners]

October 10, 2019 100 By Peter Engel


(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)