How to get your art from Photoshop to web

If you use Photoshop, you may be unsure how to display your work online. The best options depend what type of images you have: scanned artwork, digital art, or photographs.

Vector vs. Raster

If you use Adobe Illustrator or any Adobe vector tools (vector art can be imported as a Smart Object into Photoshop) realize you cannot display the vector art online; you will have to convert it to raster.

If you want to know more on this topic, here is a clear explanation for beginners of vector vs. raster files and how and when to use them.

The three types of files we will discuss here are all raster. Photoshop allows you to rasterize vector art easily. If you create text in Photoshop, you can also rasterize that with a simple command.


File formats for the Web

Adobe Photoshop files, called PSDs, cannot be embedded in a Web page because they are layered (single-layer PSDs cannot be displayed either). You have to export your document and save it into a web friendly format.

There are 3 formats for web graphics: JPEGs, GIFs and PNG. JPEG: works best with photograph, digital art, or graphics that have more than 256 colors and gradients. They’re great for original artwork and photographs.

Read More  Fallen Trees: What to Do

They’re the most common kind of internet file. Images saved in JPG format are compressed, meaning that image info will in fact be lost, resulting in a small loss in sharpness. That is called a lossy image.

Save for Web in Adobe Photoshop is now legacy tool in the program, which means it may go away, but it’s extremely useful for keeping your files small. It’s quite easy to get a decent-size photo for a blog post to under 30kb, an ideal size if your’e concerned with page-load speed.

When you save an image in Photoshop, altering the value from the Quality dropdown box varies the degree of compression. Reducing the quality might result in blur or pixelization, but too high a setting will produce a large file which will take users too long to download onto their screens.

A good strategy is to decrease the high quality value progressively until the picture becomes degraded and no longer looks acceptable.

GIF and PNG files

The GIF format may have a maximum of 256 colours. GIF files encourage transparency and animation, and works best with graphics that have large regions of the same color.

1 thought on “How to get your art from Photoshop to web”

Leave a Comment