Phire Design » How-To

Create a Realistic Dry Erase Board

AJ — Thu, 13 May 2010 14:42:13 +0000

In this tutorial, I am going to show you how to easily create a Dry Erase Board in Photoshop. This is a relatively simple tutorial, with which I have provided the stock imagery you’ll need as well as the complete PSD file which you may download.

Open a New Document, with a size of 500px by 300px. Using a white background, of course.
For the frame, I simply searched for “aluminum frame” and found an image I could use as a source. This is what I found:
I used the top piece from the stock image and just stretched a section and duplicated/rotated it three times to form the frame. Then simply use the polygon selection tool to trim the top two frame pieces at a 45° angle.
Now, Ctrl+Click each of the layers (Cmd+Click on Mac), and press Ctrl+E (Cmd+E on Mac) to merge the layers. Go to Layer> Layer Style> Blending Options… And click on Drop Shadow. Use the settings as shown below.
Now click on Gradient Overlay and use the settings below.
This will add a subtle shadow to your “white” board, and the frame to give the illusion of it being 3D.
Create a new blank layer above your background layer, but below your frame layer. Now grab a large blurred brush, 300px or so, and create a halo around the edges of your white board.
Drop the opacity of this "halo" layer to around 10%.
For this part, go ahead and download these watercolor brushes. Using brush number 12, set it’s size at 20px, and it’s opacity at 20-30%, and it’s color to any red. Create a new layer and go crazy! Create two more layers, one for using a blue, and one for black. This will help us to create the illusion of a “used” dry erase board with ink remaining on the surface.
Give each one of these layers a Gaussian Blur of 7px, and adjust the opacity according to taste.
Head over to DaFont.com and download Hand of Sean. Just so happens to be the font I used for this project, but you can chose any font you would like. When putting text onto your board, be sure to drop it’s opacity a bit. Too rich of a color will make the text look fake on the board. Here is what you get when you are finished! Download the PSD below.

Christmas Ornament Video Tutorial

Phire Design — Fri, 27 Nov 2009 15:02:04 +0000

In this video, you will be walked through on how to create a Christmas Ornament in Photoshop CS4. This is easiest to complete using a Wacom tablet, but can also be done with a mouse. It depends on which you are more comfortable with. Ornaments are extremely easy to create and can add a little holiday flair to your website.

Click here to view it on YouTube in HD.

Custom Login Page Full Body Background How-To

Phire Design — Sat, 07 Nov 2009 17:18:01 +0000

While setting up a custom login page for a client using our Custom Login Page WP Plugin, I figured something out that is possible with the current version, through some simple custom CSS, but will be included in the next version.

Full Page Body & Background Image
Currently the Wordpress login page has an “active body” that only extends to the bottom of the form div. If you are logging in to Wordpress is it currently at 400px. When you login out and are taken to the login page with the confirmation message at the top, it is at 459px. This is the area that you can customize through our plugin with a custom background image.

To edit this you can simply insert some custom CSS in the Custom CSS area of the plugin.
Here is what I have used for this client:

body {height: 1000px; background-color: #ffffff;}

Your height should represent at least the vertical resolution of your monitor so that your background does not get cut off. If you know CSS in the slightest you know that all this does is assure that the body portion of the document extends at least 1000 pixels vertically.

Since you have done this, now all you have to do is specify your background image in the top portion of the plugin’s page, and set it’s repetition to “repeat”.

How-To & Freebie: Modern Cubism Wallpaper

Phire Design — Sat, 24 Oct 2009 05:56:45 +0000

While looking for new art to put in our recently redecorated bedroom with my wife, I noticed quite a few pieces that were roughly based on cubism, but had that rustic grunge look that is oh so popular in home decor these days. Although it could be considered to be over used, I can see why. It is really nice looking and goes well with almost any decor within your color scheme.

My desktop was looking a little bit out dated, so I decided to take a whack at recreating the art we looked at, but as a wallpaper instead. Here is how it was done, as well as a downloadable wallpaper pack of my creation.

Head over to Colour Lovers and find a color palette that you like. Open a new document at your desired size, and fill your background with a light grey. (#f5f4ec)
Create a new layer. Change your foreground color to a darker grey (#bfb5a5). Select your brush tool and set your Opacity to 75%, and Flow to 90%. Now using any and all of your grunge/cloud/watercolor brushes, fill the space at random. If you overfill it, you can always add a layer mask and get rid of some of it.
Create another blank layer. At random, create squares and rectangles with a brown(#392b0e) 8px border.
Create a new blank layer below your outline layer, and fill one of your shape areas with a color from your color palette that you got from over at Colour Lovers. Repeat this for each block of color. New layer, fill shape, new layer, fill shape, and so on, until you have all of your shapes filled. It is important to keep them on separate layers for our next step.
All of my color block layers got set to Overlay in the blending mode drop-down, but depending on your color scheme, this may not work out the best for you. Alter the layer opacity and blending mode on each one of your color blocks until you get something you like.
Finally, add a layer mask to your outline layer, and dirty it up a bit. Flatten your image, and there you go. A grungy modern cubism wallpaper.

Download the set below.
Sizes are 1680×1050, 1600×1200, 1440×900, 1280×1024, and 1024×768.