When Web design became a significant part of a Photoshop user’s job, Adobe added Slices to its arsenal of design tools. Slices can be used to save changes as you create graphics for the Web. Essentially, you will use Slices to divide up a Photoshop document. Each “Slice” gets saved as a different image when you Save for Web. Slices are especially useful for Web designers who mock up entire Web pages in Photoshop during the design process, and then want to export the graphics and the HTML code Read more [...]

All digital images must be rectangular in shape, but sometimes you may want to create the effect of an irregular outline. You can do this by matching the background color of your image to the background color of the web page it is displayed in or by creating a transparent area in the image through which a web page background will be visible. It is necessary to use a transparent area when you will be placing the finished image on top of a background that has a pattern or texture or on top of a Read more [...]

If your image is at 72 dpi and you’ve made all your edits (color correction, cropping, resizing), you’re ready to save it as a JPEG or GIF. Go to File > Save For Web. A window will open that lets you preview different GIF and JPEG settings before you save. You can select either the 2-Up or 4-Up tabs. The 4-Up tab gives you four previews, as shown below. In the upper left, you have the original image. Select any of the other three previews and choose one of the pre-defined web settings Read more [...]

If you have ever drawn an illustration with pencil and paper, you’re familiar with the limitations of drawing an object on top of another object. When you change your mind later about it’s placement, the “topmost” object must be erased – and when you erase the top object you also erase what’s underneath. In Photoshop, the same effect happens. If you use the Brush tool to lay color on top of another element you created with the Brush tool, the two areas merge. When you want to move one, you Read more [...]

The resolution of an image or graphic refers to the pixel density. For example, a high-resolution image for use in a glossy magazine is usually 300 pixels per inch in resolution. But computer monitors don’t display higher resolution than 72 pixels per inch, so it’s not necessary to go higher than that when creating graphics for a website. And it’s actually counter-productive because the higher the quality, the larger the file size and the longer it will take a user to download your web page. Waiting Read more [...]

Foreground and Background Colors The foreground color (the box shown in black in the toolbar screenshot) is used by the current drawing tool – it’s the active tool. The background color is used to fill in erased areas and to create gradient fills. To set the foreground and background to 100 percent black and white, click the small boxes next to the foreground and background color boxes in the Tool Palette. To switch the foreground and background colors, click the small arrows next to the Read more [...]

Photoshop is an excellent tool to create new graphics that can range from elaborate illustrations to what appear to be simple text headlines. It’s available as a full version for about $600 (considerably less if you are a student) or a stripped-down version called Elements that can be had for less than $100. There are other programs that do many of the same things as Photoshop, like the open source Gimp or value choice called Paint Shop Pro. All of these programs do the same basic function that we Read more [...]

Blogs come with their own set of problems. You can expect to have to deal with comment spam, Trackback spam and trolls. Spam and Trolls Sadly, blogs aren’t free of the universal Internet malady: spam. On blogs, spam takes the form of commercial messages in your comments and Trackback links, and offensive rants from posters called trolls. Spam comments accumulate when spammers send scripts out to find and post to blogs. Typical subjects include online gambling, mortgage offers and pharmaceutical Read more [...]