This is the first in a series on turning the Default WP Theme into something wonderful. Today we’re going to go over the basic structure of a Wordpress Theme. I’m not going to go over the WP installation process, so check out the Wordpress 5 Minute Install if you need some help with that (if you are having any issues with the install, feel free to ask me).

By the way, we’ll be using Wordpress 2.5.1, the shiny new version of this beautiful platform.

Wp-Theme Structure: Your Main Page

style.css:
This is your CSS stylesheet for your WP theme. If you’re not familiar, CSS (Cascading Style Sheets) is a way to define the font, layout, design of your website. CSS is great because you can use one document to set the style of your entire site. Thus, if you want to change the color of all the links on your entire site, you can just change the CSS link tag. W3schools is a great resouce. Maybe we’ll do a css tutorial some time too.

header.php:
Header.php contains your posts meta tag and title information, links to stylesheets, rss information, and links to javascript. It also contains your header image and the top of your container (Page) <div> (which sets the border around your page, as well as other things such as size, positioning, etc.).

index.php:
This is the main body of the page that someone sees when they go to www.[Your Web Page].com/[WP Folder]. It contains includes for the header, sidebar, and footer.

Index.php also contains the heart of a WP page: The Loop. The loop is what WP uses to show posts, and information associated with posts, such as the author, tags, metadata. By editing the loop you can make WP do all sorts of neat and helpful things.

sidebar.php:
The sidebar contains all of your navigation in the default theme (we’ll be changing this as we go). It includes your searchform, login and administrative links, and gives you the option to display lists of categories, authors, archives, and links. There are also areas in the sidebar that display specific information depending on the page you are on.

searchform.php:
Searchform is exactly what it says. It is the form that holds your search field and button.

footer.php:
By default this file closes your container (Page) <div>. It also includes post and comments rss a link to wordpress.org (a nice thing to keep).

Press on to the next page: Individual Posts, Archives, and Search Results

Here’s a neat effect that I happened upon by accident. It’s a really simple Photoshop trick that results in a cool little watercolory smudge. Now you may be thinking, “You fool! Why bother with this? What could you even use this for?” The answer, my friend, is anything your heart desires. They make great ambient backgrounds, nice accents, and are just a fun thing to throw into your composition when you need a bit of subtle color.

Step 1:

The first step is creating a new layer with a transparent background and dragging a small radial gradient onto it. Make sure you don’t bring the gradient to the edge of your canvas, as you’ll have to stretch it in the next step.

Step 2:

Stretch your gradient out a little and set the layer opacity to around 50%.

Step 3:

Now we’re going to use something REALLY helpful, an Adjustment Layer. These things are great because they let you change things like color, contrast, and saturation non-destructively, that is, without changing the original pixels.

We’re going to create a Hue/Saturation layer. To do this either click on the black and white circle at the bottom of the layers panel and click Hue Saturation… or go to Layer>New Adjustment Layer>Hue Saturation…

When the Hue/Saturation properties panel pops up play around with the hue however you like, that will change the color of your smudge. It is very important that you set the saturation to +100. Leave the lightness alone for now.

Step 4:

Let’s create a new layer. Set your foreground color to black, grab a big soft brush, and paint around your shape till you get some neat colors around the edge. Don’t go to far over the edge of your gradient or you’ll get a lot of weird gray area, unless that’s what you’re looking for. This step is where CTRL-Z (undo) is a good friend.

Step 5:

Now set the opacity of the black layer you just painted to around 15% and you’ve got yourself a nice paint smudge. The great thing about this is that since you used that Hue/Saturation layer, you can easily change the color of your blob by double clicking on that layer and adjusting the Hue.

GodBless:VQ

Hello everyone. I’m glad you could join us on this fantastic day. I thought today I would show you how to make a nice cheerful sun to live with the clouds we made in the last tutorial.

Step 1:
Let’s start with our standard 600px by 600px Illustrator canvas. Like I said last time, you can really set your canvas to whatever size you like; but if you use a different sized canvas, the numbers I use throughout the day may not work as well for you as they do for me.

Step 2:
Now we’re just going to drop in a nice little circle using the Ellipse tool (l). I put this right in the center of my canvas, but you can put it wherever you like. You know what, it doesn’t even need to be a circle. You can put down an oval if you want. Always remember, this is your sun, so have fun with it.

Step 3:
Next you’re going to make larger circle around your first circle. The way I do this is by selecting my first circle, holding down ALT, and hitting either the LEFT key to duplicate my shape. Then I hit the RIGHT key to move it right back over top of the first circle, and then scale it out and make it bigger. Once it’s a size I like, then I hit CTRL + SHIFT + [ to send the big circle back behind our little circle.

Remember now, this is just the way I like to do it. If you have a different way, use it. And let me know, we’re all learning together here.

Step 4:
Ok. Now that your circles are happy together, make sure your outer circle is selected, and give it a nice Zig Zag effect (Effect>Distort & Transform>Zig Zag).

I set the size to 3%, clicked the relative circle, and gave it 7 ridges per segment. I picked relative so that no matter what size we make our sun in the end, the size of the halo will stay the same. I also make sure to set the points to corner to give good definition to my sun’s halo. Maybe you want more points, or less, or a smooth wavy halo. It’s your world, let your imagination run wild.

Step 5:
Next we’re going to set a light yellow to yellow radial gradient on the inner circle. Since this is a cheerful sun, I’m making sure the face of our sun has a nice bright gradient. Now we’ll use the gradient tool (g) to pull the gradient down from the upper right part of the sun’s face and give a hint of depth.

Step 6:
We’re going to go crazy now. Let’s select our outer halo and set a yellow to orange radial gradient. Grab the gradient tool (g) and have some fun with the size and position of your gradient.

Step 7:
To finish up, I used the sky and some of our cloud friends from the last tutorial to give a home to our new sun. I took the stroke off all these guys to make everything look much softer. All of the clouds have a little drop shadow on them, just like the last time, so they look like they’re just floating right along without a care.

Now I think we’re going to call this one done. I hope you had a fun time today, I know I did. From all of us at ClickPopMedia, have fun with Illustrator, and God bless you.

Ahoy lads and ladettes. While working on a recent logo design project, I had to create an element that resembled a nuclear fallout symbol. I found a quick and easy way to do just that using a custom illustrator brush, and now I will share my secrets with you.

Step 0.5:

Open Illustrator

Step 1:

Using the Rectangle Tool (keyboard shortcut “m”) Create 1 black square and 1 white square next to each other (if you don’t know this yet, if you hold down shift while dragging out a rectangle, circle, etc. it will make a x by x square, circle, or whatnot).

Step 2:

Select the 2 squares and drag them into your brushes tab.

Step 3:

When the New Brush menu pops up, make sure New Pattern Brush is selected and press OK.

Step 4:

In the Pattern Brush Options, give your brush a name, leave the other settings alone, and hit OK.

Step 5:

Use the Ellipse Tool (keyboard shortcut L) to make a circle. Apply your new brush as the stroke.

Step 6:

If you’re lucky, you’ll end up with the correct symbol. Odds are you won’t though, so adjust the stroke weight until you’re shape is just right.

Step 7:

Don’t worry, we’re almost done. Select your circle and go to Object>Expand Appearance. That will make your stroke into individual shapes that you can scale, color, and otherwise edit as you wish.

Step 8:

Now Delete the three white border pieces. This will leave you with two extra circles. Set one circles fill to black and shrink it down to the center. Give the other circle a black stroke and enlarge it.

By changing the stroke width before you expand the appearance, you can make some other neat shapes. Mess around with it and have some fun.

GodBless:VQ