SOLD

Nothing wrong with a little self promotion right? Well, I have a Wordpress Theme up for auction over at sitepoint. It's a pretty nice theme and easy to customize so feel free to check it out.

Here's the Description:

*This custom made Wordpress Theme has 3 dynamic sidebars (widgets) at the top of the theme.
3 dynamic sidebars (widgets) at the bottom of the theme.
And the regular sidebar is ready for widgets.

*This makes the theme easily customizable. Just go into the Wordpress dashboard widget area and drag and drop widgets into a sidebar.

*Plus the CSS and HTML are commented to help you figure out how to add/change things.

*The theme includes spots for site sponsors - the conventional 125px X 125px square is used and you can go in and add as many as you want - or delete them if you don't need them.

*The theme comes with the Photoshop files for the header(logo) and backgrounds.
All you have to do is open Photoshop and type your site name instead of the placeholder text that is there(even for the reflection - just type your site in). If you don't have Photoshop send me an e-mail and I'll change it for you!

*The CSS and XHTML validate.

*Two column design with three extra columns under the logo and three extra columns in the footer

*Tested and works great in Firefox IE7 and IE6

*Full Rights - I am only selling it once, but you can do whatever you like

And a live demo of the Wordpress Theme

Popularity: 4% [?]

Another slight setback in posting - stomach flu all weekend. I'm starting to feel better now and hopefully will have something new for you this week. But for now, you can now download the completed Photoshop files for a couple tutorials here at freeyourdesign. As of right now downloads are available on these posts or on the Free Stuff page.
Photoshop Stripes Pattern
Web 2.0 Button
and the popular Web 2.0 Header with Stripes

Also, a reader asked to me to make the stripes pattern a little smaller - so I'll be getting that done soon and put it up for download.

Enjoy - and if you find them helpful a small donation would be greatly appreciated.

Popularity: 3% [?]

I have used this pattern in the Web 2.0 Button and the Header with Stripes tutorials. If you don't want to go through the process of creating the pattern then just download it here.

Download Stripes Pattern

This is how I would go about installing the pattern(for windows). Just navigate to where your Adobe Photoshop files are installed and inside the Presets folder there is a Patterns folder - for example: C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Patterns - place the stripes.pat into this folder and you should be ready to use it in Photoshop.

Popularity: 15% [?]

We are going to create a snazzy web 2.0 glossy button. I am using Photoshop CS2, but I'm sure these techniques will work in most versions. The size you make the button is up to you and should be customized to fit the site you are building. In this Photoshop tutorial we are going to be using tools like the gradient tool, marquee tool, pen tool, text tool, a pattern, and more.

We will be using a stripe pattern in the background of the button, so if you didn't complete the pattern in the web 2.0 header tutorial you can download it here.

Download Stripes Pattern

Let's get started.

File Setup

Open up Photoshop and create a new file. Like I said, the size is up to you - I will be making mine 200px X 50px.

Create a new layer and name it bg.

Rounded Corners or Not

First, grab the gradient tool.

Set the Foreground color to black.

Set the Background color to 50% gray.

Using the gradient tool click and drag from the bottom to the top - so that the black is at the bottom of the button.

If you want the button to be rectangular then skip to adding a stroke.

If you want the button to have rounded corners follow these steps.

Grab the Rounded Rectangle Tool

At the top set the Radius: to 10px and make sure Paths is selected.

Start in the upper left corner and pull out the shape to the lower right corner.

Right click and select Make selection… Feather Radius: 0 and click OK

Next hit ctrl+shift+i to invert the selection and hit delete on your keyboard and now the corners are rounded.

Add A Stroke

Whether you rounded your corners or not, let's add a stroke to the bg layer.

Double click on the bg layer to open the Layer Style window.

Click on stroke and set size to 1px, Postion: to Inside, and the Color: to black.

Add the Stripes

Create a new layer and name it stripes.

ctrl+left-click on the bg layer's Layer Thumbnail to create our selection.

Go to Edit->Fill… make sure Use: is set to Pattern

Now to load the stripes pattern you downloaded. Follow the directions on the image below then browse to the place you saved the stripes pattern and load it in - it will show up at the end of the list of patterns. Click it and hit OK.

Set the Opacity of the stripes layer to about 20%.

Add the Text

Grab the Text Tool (keyboard shortcut 't').

Set the options to Myriad Pro for the font Bold and 24pt - I used a light gray for the color.

Select the text and change the Vertical and Horizontal scale to match the image below.

Add the Highlight

Create a new layer and name it highlight.

Using the Pen Tool create a path similar to the image below.
Then right-click and pick Make Selection…
Click OK and fill it with white.

Once again ctrl+click on the bg layer's Layer Thumbnail to make it our selection.

With the highlight layer still active hit ctrl+shift+i to invert the selection and hit delete on your keyboard.

Change the opacity of the layer to about 15%.

Text Reflection

shew… text reflection anyone.
Right-click on the text layer Home and select Duplicate Layer… and click OK.

Go to Edit->Transform->Flip Vertically

Hold down shift and drag the reflection down below the text.

Adjust the Opacityof the reflection to 40% or so or add a layer mask which ever you like. And there you have it - were are done with our Web 2.0 style button.

Download the psd file for this Web 2.0 style button and get an extra stripes layer so you can have to colored stripes. To change the color just ctrl+click on the Layer Thumbnail to create the selection and fill it with the color you want.

Grab the Photoshop file and the image file

Download Files

Popularity: 36% [?]

You might have noticed that there were not any updates to the site this past week. That's because I was in Florida laying on the beach most of the week. I'm back and there will be a really nice Photoshop tutorial coming Wednesday - a Web 2.0 button. There will also be some more site news/updates coming on Wednesday - having to do with some free file downloads.

What's the future looking like for fyd(freeyourdesign)? Well, I'd like to add a free CSS layouts page to the site and I would like to add the functionality to let users submit their own tutorials. I haven't started working on the second one quite yet, but I have an idea of how I want to do it. Just a couple of ideas and I'm working on other projects besides this site - and going to school and working part-time.

I appreciate those who stop by and check out fyd. It's still a young blog - hopefully I can keep it up and running for a long time.

Popularity: 4% [?]