How to use Photoshop to create Product Box?

Photoshop is a powerful tool for almost everything you need in graphic and web design. This article explains how to use Photoshop to create product boxes.

Product Box - final

How many times you wanted to create cool product box for some of your products? Sure, there are many ways, and with new Photoshop you have even more options to create boxes. But I wanted to show you how to create a “3D look box” in the 2D environment using Photoshop paths.

Continue reading “How to use Photoshop to create Product Box?”

Creating news site heading like in Daylife.com Covers

A few days ago I stumbled upon an interesting news site called Daylife. Its front page (Covers) is something like an internet/TV hybrid, with its flash intro page that displays most recent news. To say the least, I am a fan of Flash, as of JavaScript and other technologies, but I think that the same (or almost the same) “vow” effect could be done with XHTML/CSS combination as well.

This front page is loading very slowly, and I think it would be better that they considered some XHTML/CSS/AJAX stuff, that would be faster.

In this article I will show you how to create this kind of front page using only XHTML/CSS. As I am not the JavaScript/AJAX expert (yet:), if anyone else would like to expand this article furthermore (to create that expanding effect), please do so.

Creating news site heading like in Daylife.com Covers

Continue reading “Creating news site heading like in Daylife.com Covers”

Using Photoshop masks for creating web graphics

If you want to create a dropped shadow background than you could just add a drop shadow layer effect to a specific layer. But what happens when you would like to create a dropped shadow background that fades with the background itself. The easiest way is to use Photoshop “power”.

I am talking about Photoshop masks, and in this illustrated tutorial I will show you how to use masks to create faded shadowed background and also how to use masks when dealing with header images like in the example just bellow.

Using Photoshop masks for creating web graphics

Continue reading “Using Photoshop masks for creating web graphics”

Creating web graphics in Photoshop

In this brief and illustrated tutorial you will learn how to create most commonly used web graphics in Photoshop. Techniques explained in this tutorial, can be used in other similar programs as well. In this tutorial I will try to explain how to create a menu, like the one explained in the article CSS image replacement techniques” and then I will guide you through the process of creating a custom submit button.

To complete this tutorial you should be familiar with the basics of Photoshop like dragging guidelines, creating layers and applying the effects to them, changing opacity, and using a Tool Menu.

Continue reading “Creating web graphics in Photoshop”