Getting Started with Photoshop: Saving for the Web

Getting Started with Photoshop

  • Getting Started with Photoshop
  • Getting Started with Photoshop: Saving for the Web
  • Getting Started with Photoshop: Tools
  • Getting Started with Photoshop: More Tools
  • Getting Started with Photoshop: Alpha Channels and Selections

Saving Files for the Web

Photoshop files themselves can’t be embedded into a web page. You will need to export your file and save it in a web-friendly format. There are three formats for web graphics: GIFs, JPEGs, and PNGs.

GIF

The GIF format (pronounced “jiff” or “giff” depending on which side of the tracks you grew up) can have a maximum of 256 colors. GIF files support transparency and animation, and work best with graphics that have large areas of the same color, as shown in the logo below.

JPEG

The JPEG format (pronounced “jay-peg”), works best with photographic images or images that have more than 256 colors and gradients, such as the flower on the opposite page. Images saved in JPEG format are compressed, which means that image information will actually be lost, causing the image to degrade in quality.

PNG

Getting Started with Photoshop: Saving for the Web

The PNG format (pronounced “ping”) is similar to the GIF format in that it supports transparency and works best with solid-color images like the logo shown to the right, but it’s superior to the GIF format as it has the ability to support true levels of transparency for colored areas. Transparent PNGs are currently not in widespread use on the Web because older versions of Microsoft Internet Explorer do not support them; however, they’re often used in Macromedia Flash movies. PNGs can produce a better quality image at a smaller file size than can GIFs. Photoshop allows you to save an image as a PNG-8 file (which works the same way as a GIF would with 256 colors) or a PNG-24 file (which allows for millions of colors as well as variable transparency).

Double-clicking Power
As if keyboard shortcuts weren’t quick enough, Windows users have even more ways to open and save files, such as: holding down Ctrl and double-clicking the work area to create new documents double-clicking the work area to pull up the Open dialog box to open files holding down Alt and double-clicking the work area to open existing files as new documents holding down Ctrl-Shift and double-clicking the work area to save documents holding down Shift and double-clicking the work area to access Adobe Bridge — Adobe’s “control center” and file browser The work area is the gray area behind the document windows. If your shortcuts aren’t working, check that you are clicking on an empty spot on the work area, and not in one of the document windows or Photoshop tools! Alas, Photoshop on a Mac does not have a work area, so Mac users won’t get to enjoy the goodness of double-click shortcuts.

Getting Started with Photoshop: Saving for the Web

To save for the Web in Photoshop, select File > Save for Web & Devices… or press Ctrl-Alt-Shift-S(Command-Option-Shift-S on a Mac). This will bring up the Save For Web dialog box shown overleaf, which will show you a preview of the image that will be exported, with its optimized size in the bottom left-hand corner. You can adjust the settings for the image using the options in the pane on the right. Choose whether you want to save the file as a GIF,JPEG, PNG-8, or PNG-24, and have a play with the other settings, keeping an eye on the optimized file size. Try to strike a balance between the quality and file size of the image. When you’re happy with your result, click Save and give your image a filename.

If you tried the above exercise, you’re probably quite pleased with yourself for saving an image of reasonable quality at a file size significantly smaller than the original. You managed this by altering the settings in the right-hand pane, but what do these settings actually do?

GIF/PNG-8

  • colors – Adjusting this setting reduces the number of colors used in the image. This will usually make the biggest difference in the final image.
  • dither amount and type (No Dither, Diffusion, Pattern, Noise) – This setting has nothing to do with being nervous or agitated (although it’s quite possible that you may have been a few moments ago!). Dither refers to a compression technique in which the pattern of dots is varied to give the illusion of a color gradient. Changing the dither will result in a more noticeable degradation for images that involve a large number of colors blended together.
  • transparency – If you want transparent areas in your graphic, check this box. We’ll look more closely at transparency in Chapter 2.
  • matte color – For transparent images, the matte color is used to help blend the edges of your image into the background of the web page. For non-transparent images, the matte color defines the background color of the image. Using matte color with transparent images is covered in more detail in Chapter 2.

JPEG

  • quality – Changing the value in the Quality drop-down box alters the level of compression for the image. Reducing the quality may result in blurring or pixelation, but too high a setting will produce a large file that will take users too long to download. A good approach is to decrease the quality value gradually until you notice the degradation of your image becoming unacceptable. A reasonable compromise will be somewhere around this point.

Getting Started with Photoshop: Saving for the Web

Saving Files for the Web in Fireworks

Getting Started with Photoshop: Saving for the Web

You can optimize images for the Web in Fireworks using the Optimize palette, shown at right. Set the file type and options in the Optimize palette in advance, and when you’re ready to export your web image, select File > Export or press Ctrl-Shift-R (Command-Shift-R on a Mac). Fireworks will save the image based on the settings that you’ve defined.

Why Two Tools?
Considering that it’s possible to save files for the Web in Photoshop, it’s perfectly reasonable for you to wonder why you would need Fireworks. While it’s true that both programs can perform many of the same tasks, there are certain things that Fireworks can do that Photoshop can’t. Fireworks also makes web-specific tasks easier, and since it’s a smaller program that doesn’t contain the full suite of Photoshop effects, it loads more quickly than Photoshop. As you work through this book you’ll come to learn which tool is more suitable for particular tasks.

Photoshop Layers

Getting Started with Photoshop: Saving for the Web

Layers are a powerful feature of Photoshop that allow you to work on one part of an image without disturbing the rest of it. While the concept of layers may seem intimidating at first, once you get the hang of using layers you’ll wonder how you ever survived without them! The examples on the next page show how the layers in the Photoshop document to the right stack together.

The transparent parts of any layer, shown by the checkered grid, allow the layers beneath that layer to show through.

You can show and hide each layer in an image by clicking on its corresponding eye icon in the Layers palette, as shown at the bottom of the following page.

Getting Started with Photoshop: Saving for the Web

To organize your layers, you can arrange them into layer groups by going to Layer > New > Group…. Each layer group displays in the same way as any ungrouped layers on the Layers palette. A layer group is signified by a folder icon. You can collapse or expand layer groups by clicking on the triangle to the left of the folder icon, and nest layer groups within each other by dragging one folder icon into another.

Getting Started with Photoshop: Saving for the Web

Go to page: 1 | 2 | 3 | 4 | 5 | 6

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online course Foundations of Photoshop.

Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?

Replay

Category: design Time: 2007-10-05 Views: 1
Tags:

Related post

  • Getting Started with Photoshop 2007-10-05

    Getting Started with Photoshop Getting Started with Photoshop Getting Started with Photoshop: Saving for the Web Getting Started with Photoshop: Tools Getting Started with Photoshop: More Tools Getting Started with Photoshop: Alpha Channels and Selec

  • Getting Started with Photoshop: Tools 2007-10-05

    Getting Started with Photoshop Getting Started with Photoshop Getting Started with Photoshop: Saving for the Web Getting Started with Photoshop: Tools Getting Started with Photoshop: More Tools Getting Started with Photoshop: Alpha Channels and Selec

  • Getting Started with Photoshop: More Tools 2007-10-05

    Getting Started with Photoshop Getting Started with Photoshop Getting Started with Photoshop: Saving for the Web Getting Started with Photoshop: Tools Getting Started with Photoshop: More Tools Getting Started with Photoshop: Alpha Channels and Selec

  • Getting Started with Photoshop: Alpha Channels and Selections 2007-10-05

    Getting Started with Photoshop Getting Started with Photoshop Getting Started with Photoshop: Saving for the Web Getting Started with Photoshop: Tools Getting Started with Photoshop: More Tools Getting Started with Photoshop: Alpha Channels and Selec

  • Getting started with Rest-Assured for REST-Api Testing 2014-10-09

    I am new to REST-Api testing. i am getting started with Rest-Assured for Rest-Api testing. i am having an issue in my first ever testcase. The code is as follows: @Test public void testGetSingleUser() { expect(). statusCode(200). body( "email",

  • file-system incremental backup - ideally with no downtime for the web site 2011-04-25

    I am trying to design a web site with backup in mind. Large media elements would be stored on the file system and a daily backup would be done both for the DB and the file-system (which would hold the media elements). While backing up the DB seems st

  • How can I get started with developing apps for Ubuntu Touch? 2013-01-10

    I am interested in trying the new Ubuntu for phones OS development. (I am not an Ubuntu developer, I am new to Ubuntu. Impressed by the Ubuntu Touch preview, I got interested in learning how to develop for it). Where can I start with it? I can't find

  • How to get started with Unreal Engine for iPhone? 2011-08-09

    OK i have decent amount of knowledge of C++. I want to make cool games for iPhone using unreal engine and I have access to UDN. But everything seems cluttered on UDN. I have downloaded source from there. It would be great if someone can provide infor

  • Getting started with PCB Layout for BGA Packages 2010-10-27

    Are there any good resources for learning the intricacies of PCB layout when dealing with BGA packages? I'm very familiar with layout for almost every SMT part that has leads on the edge (QFP, TSSOP, QFN, etc...) However, I have not ever had a chance

  • How do I get started writing an applet for the panel? 2011-08-20

    Currently I am personalizing my Ubuntu installation and i want to write a small applet to add it in the top left corner of the screen. This should be a "main menu" like in Mac OS X where i have a menu that opens when i click the (Apple/"Tux

  • Getting started with MapGuide Open Source 2.1.0 for Windows 2012-01-23

    I installed MapGuide Open Source 2.1.0 for Windows for php. The MapGuide Server 2.1 is running and the Apache Server is running, but ApacheMapGuide2.1 is not running. There is not documentation for 2.1.0. The site asks us to reference MapGuide Open S

  • JumpCast: Get Started with Sinatra 2013-02-20

    Get Started with Sinatra For more JumpCasts like this, visit Learnable Jess: I'm here with John Barton, who is one of the founders of Goodfil.ms. He's here to talk to us about Sinatra today. What can you tell us about Sinatra? John: There's not a lot

  • How do I get started with SharePoint 2010? 2011-12-08

    Possible Duplicate: An introduction to SharePoint 2010 I have been volunteered to evaluate / learn sharepoint as we are considering it as a platform for meeting some of our business needs. However I have no sharepoint experience and having spent the

  • How do I get started with security? (beginner) 2012-05-22

    I have been working in web development for a fair amount of time. I am looking at developing in either Python (Django etc.) or PHP. I am new to security. Where do I begin looking? What are basic things I should have in mind? Basically, how do I get s

  • Get Started with Three.js 2012-12-10

    The process of creating 3D animations was previously costly, time-consuming and requiring significant learning. Until now! Thanks to Three.js, 3D animations in the browser are now more feasible than ever before. Before Three.js, you had to use specia

  • Get Started with Git 2012-12-19

    Based on its popularity, it's likely that you may have heard of Git. By definition, Git is a distributed revision control and source code management system (SCM). Put simply, Git helps you to save projects at different versions so that you can retrie

  • Getting Started with Go 2014-04-17

    Unless you've been living under a rock these last few years, you'll have heard of Go (sometimes referred to as Golang), a language originating from Google, some years ago. Go is slated as: -an open source programming language that makes it easy to bu

  • Getting Started with SharePoint 2010 2010-06-04

    I've been a member of Stack Overflow for a while and have this week been given a project of having a play around with SharePoint 2010 to see how it works basically, as we're looking to use it to replace our existing intranet site sometime soon. We ha

  • Getting Started with PHPUnit 2011-11-14

    Most people know that testing your websites is a good idea, but after some time testing can become tedious. What if a lot of this testing process could be automated so you don't have to go trough every function manually, time after time, to ensure th

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 3.230 (s). 13 q(s)