How to Create Your Own Digital Images With Adobe Photoshop

Part 1 - Beginner Tutorial

We view digital images everyday while we surf the Internet, check our emails, and set the backgrounds on our Androids and Iphones.

Often times, especially with photos, we find problems like unwanted lense flare, or red eyes, and would like to have this stuff edited out of our photos. Or if you interested in web design you may want to learn how to creat logos and headers for your web sites. Editing Photos and creating custom logos and headers is accomplished with some type of image editing software. the two main types of editing software in use today are vector graphics and raster graphics. In this tutorial we will deal largely with rasters.

Adobe Photoshop 7.0 - Photoshop cs

Photoshop is arguably the most popular image editing software for web site design. It offers features that were created specifically for web design such as.

  • Image Compression for Lossy Images
  • Hotspots and Image Map Creation
  • Image Slicing
  • Animated gif Creation
  • HTML - Table and Table-less HTML pages
  • Image Gallery Creation
  • Fonts, Borders, Gradients Backgrounds, and Textures

These features can make light work out of what would oterwise be hard to accomplish in the way of custom web design graphics.

Creating a Photoshop Image


To create your first "Photoshop Document File", open up your version of Adobe Photoshop and press ctrl/O or click the "File" menu and choose "New". Photoshop saves new work documents with a .psd extension.

Base64 Image


Creating a blank document is actually pretty easy. After clicking "New" a dialog box opens up and prompts the user to enter the height. width, resolution, and color mode of the new Photoshop image project.


Next you will see a workspace with a box in the middle called the canvas.

Base64 Image
  1. Tools
  2. Canvas
  3. Layers
  4. Text Tool

Notice the Hello World Text on the canvas. This was accomplished with the Photoshop Text Tool.

Optimizing for The Web


Congratulations you have just created your first custom made image that tells everyone "Hello World".

Now save the document for the web by pressing "ctrl-alt-shift-s" or "File-Save For Web".

The save for web option gives users various options for optimizing images for use on the Internet. The goal when optimizing images for the web is to create a good looking image with as few bits of information as possible. Using this function a web designer can specify what type of image format to use -- jpg, bmp, gif, png, and others. There are some advanced options such as interleave or none interlace, progressive, and the ability to specify exactly how many colors can be used in a gif image. The gif images allow the user to choose any where between 2 to 256 bit color formats.

Base64 Image

This tutorial has covered the basics on how to create custom images with Adobe Photoshop. This tutorial ofcourse is meant for the absolute beginner. It is doubtful that anyone will find much use with a Hello World gif, unless you are writing a tutorial like this one.

The next tutorial will cover the use of layers, the text tool, and creating borders.