BPease Design » Tutorial

Creating a Christmas E Card

Bob Pease — Mon, 14 Dec 2009 03:45:55 +0000

It’s Christmas time, and to celebrate the season I’ve put together a simple tutorial to design an E Card to send your friends, family, clients, or whoever you think could think could use a bit of Christmas cheer.

Step 1: Setting up the canvas

Let’s start by creating a new 500×300 canvas. Set the resolution to 72 px/in, and color mode to RBG color, 8 bit.

Next we’ll apply a gradient to our background layer #AD0404 to #870404.

Step 2: Add some snow

Create a new layer called “Snow” (Ctrl + Shift + N). Use a soft round brush and set the size somewhere around 15px.

In your brush settings pallet apply Scattering and Other Dynamics as follows, be sure your foreground color is set to white.

Step 3: Add a lens flare

Add a new layer called “flare” and fill it in black (Ctrl + Backspace). Then go to Filter>Render>Lens Flare and set the brightness to 50%, and select 50-300mm Zoom. Click the bottom right corner of the Flare Center section and click OK.

Now set the blending options of this layer to Screen. Duplicate this layer (Ctrl + J) and go to Edit>Transform>Flip Vertical. Then move the new image up and to the right a few pixels.

The lens flare adds some lighting effects across the entire image, which I chose to get rid of. Just use the Erase tool as you see fit and get rid of the parts you don’t want.

Step 4: Add the tree

Grab this Christmas brush set http://flina.deviantart.com/art/Christmas-brushes-103012446 and select the “tree1″ brush and set the size to 400px. Place the tree on top of our snow/lens flare layers. Then go to the blending options and set the Color Overlay to #870404, and Outer Glow to white.

Step 5: Adding icons

Now we’ll add a couple of Christmas icons. I used a Santa Clause and a Christmas present. Resize them to your liking, be sure the present is over the Santa Clause and let’s give it a drop shadow to make it stand out a little bit.

Step 6: Adding the text

I chose a nice script font from Font Squirrel called Beautiful-ES. I chose a slightly smaller font size for “Merry” and positioned the text in the upper left corner of the canvas.

Step 7: Adding your own touch

Now we have a template for a nice E Card. Add your message in the middle of canvas and send it off!

You can download the final .psd file here.

Styling wp_list_pages

Bob Pease — Wed, 11 Nov 2009 23:22:26 +0000

Recently I was approached by someone who wanted to add some styling to the default wordpress navigation. The theme uses for the navigation. The functionality of the site calls for several main pages, with sub pages in each. The layout will be a horizontal menu, with sub pages listed horizontally below.

The Breakdown

Let’s first break down what using will spit out in your HTML. This function embeds each page link within a list item of an unordered list. The link for each sub page is then put into a new unordered list witin the initial list item of the parent page. Below is an example of the HTML generated for 1 parent page with 2 child pages.


	
      Page 1

	P1 Sub Page 1
	P1 Sub Page 2

For further documentation of this function, see http://codex.wordpress.org/Template_Tags/wp_list_pages.

Putting It To Use

To impliment this into your own theme, you will first want to call the function. I recommend putting this within a

with a specified id, to better control the CSS.

HTML:

Then style the

elements by nexting them within #main-nav.

CSS:
```
#main-nav{
   overflow: hidden;
}
#main-nav ul{
   list-style-type: none;
}
#main-nav li{
   float:left;
}
#main-nav li a{
   color:#4aa1ff;
   text-decoration:none;
}
#main-nav li a:hover{
   color:#333333;
}
```
At this point, every page and subpage will have the same styles. Let’s take this a step further by adding some CSS for those sub pages.
```
#main-nav li li a{
   color:#fb7200;
}
#main-nav li li a:hover{
   color:#333333;
}
```
If we created children in our sub pages, we could simply apply the same logic in our CSS and add another section #main-nav li li li a{} with different styles from the initial 2.

Styling Your WP Search Forms

Bob Pease — Wed, 04 Nov 2009 03:47:24 +0000

Recently I had the task of setting up a new WordPress theme for a local group. In the mock up of the website I had made a search field that required a bit more work than I was used to. It took me a while to get everything in place, so I thought I’d share the steps I went though to achieve the final result.

The End Result

Step 1: The Basics

Let’s keep it really simple to start with. Open your favorite HTML editor (mine is Dreamweaver) and create a new HTML page. In the tags put the following line of code and save this file as index.html.

When you preview this page you should see something like this:

Step 2: Reset Default Styles

So now that we have a plain old input box and submit button, let’s make it pretty. Start by creating your searchbox & button as an image and saving as a .PNG. Here is the image I’ve created for my form:

The width doesn’t matter, as we are applying this as a background image.

Now let’s go back to that initial markup we put in the HTML page and apply a class to each piece. Also set the value=”" so that there is no text in the submit button.

The next step is writing the CSS. In between your tags let’s create our CSS and take away the default styles of the input fields:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    }

Now you should see something like this:

Step 3: Expanding The CSS

Now we need our CSS to tell our form how big to be, in order to match the size of our images.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
     }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    }

Let’s refresh our page and see what we have now.

Step 4: Fixing The Layout

We’re almost done! We now need to get our submit button position correctly with our text input. We’ll add a position:absolute to the search-btn class:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    }

Step 5: The Final Touches

Now try typing in the input field. Not terrible, but the text is a bit off. So let’s add a font-size and text indent to the search-text class of our CSS. We’ll also define the cursor on the search-btn since we’ve reset the defaults and it currently doesn’t change.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    font-size:18px;
    text-indent:5px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    cursor:pointer;
    }

Step 6: Applying To Wordpress

I always have an easier time designing WordPress parts like this as basic pages outside of my theme. When I’m done I then apply the changes to my theme.

In your WordPress theme, open searchform.php and add the classes to and (these may vary slightly depending on the theme, but it should be pretty straight forward). Some themes do not have searchform.php, and if that is the case simply create one on your own with the values we created in index.html. Next apply your CSS changes, and be sure to copy your image to the appropriate folder!

That’s A Wrap!

I hope you found this tutorial helpful. Take it to the max and please share what you’ve made! Feel free to download the HTML/CSS code for the search form, as well as the .PNG & .PSD files.

styleSearchTutorial