So as many of you noticed, and left me comments about, the downloads on the Infect The System website were broken.

It all started when I updated the version of Wordpress running this website. That went as smooth as it always does and things seem to be fine. And as with most updates this can cause many plug-ins to stop working, which isn’t a big deal either as you can usually update those as be fine.

However, this time when I attempted to update my download manager “DrainHole” it caused a big error and download were down! I tried numerous time to fix it, but it just wasn’t happening.

Since this blog is relatively low priority over other things in my life, I didn’t have a lot of time to track down the error to fix it. So I decided to wait for the next WordPress & DrainHole updates, and they are finally here!

Anyway, late last night (around 12am) i got everything back up and running and downloads are once again working.

Thank you to all who left comments!!!

The other day I was busy making some buttons for a client, and after designing one of them, i decided to make a whole set of them and give them away here.

These buttons would be great to replace your standard set of buttons on a website.

This button set includes the following buttons in orange: Browse, Cart, Checkout, Delete, Details, Go, Login, Logout, Order, Reset, Search, Sign Up, Submit, Upload, and a blank button to use as you please. This set also includes the full PSD Photoshop file so you can edit it all you like.

Hi all you RSS and XML Feed Fanatics!

Infect The System is now using Feedburner to send out our feeds.Why you may ask? Well, Feedburner offers so many improvements over the basic wordpress feed.

Most notably for me, it has wonderful analytics integration to make feed stats easy to see and analyze, and on your end (the reader) the feed is much easier to read both in feed readers, and in browsers. In addition to that, it is also setup to easily adapt to any feed reader flawlessly.

So that’s about it for this quick little rant, if you care to update your link to the feed here, just click on the RSS Feed Icons on the the top of the page!

Thanks!

Have you been noticing those large download buttons popping up everywhere over the last year or so? I sure have, they are really eye catching and in your face. It’s next to impossible to ignore them, and they get the point accross.

I just recently started adding some these buttons to my site to increase downloads, and I think it’s working so far! Anyway, after I designed mine I decided to to write a tutorial blog about it, and give away the resulting file that I create.

Here is the final result that we will create in this tutorial:

Step 1 – Create A New File

Create a new photoshop file with a dimension of 225px by 100px

Create new Photoshop file

Step 2 – Convert Background Layer

Covert the background layer into an editable layer by double clicking on it, and then choosing “OK” from the resulting new layer pop-up window.

Convert the background layer

Step 3 – Create 3 new Groups

Create 3 new groups

Create 3 New Group’s and label them, Text, Icon, & Background. (Yes I am a little obsessive about Photoshop file organization.)

Step 4 – Adding the Gradient

Add a gradient

Move the Background layer, into the Background Group folder and double click it to bring up the layer style menu. From there go to the Gradient Overlay section.

Create your custom gradient, or use one of the pre-defined photoshop gradients. For this example, I am going to create my own Gradient and use #4c5159 as the lighter color, and #0b0e10 as the darker color, which gives us a result like this:

Our new background gradient

But we aren’t happy with the default gradient settings are we? NO! Let’s add a little more style to the gradient.

Open the layer styles palette for the background layer by double-clicking the layer. Then select the gradient palette, and change your Gradient Style to Radial, and your Gradient Scale to 150%.

Customize the Gradient

Which should give you something like this:

Change the graident type to Radial

But WAIT! Before you close the Layer Styles pallete, use your Move Tool (V) and drag the gradient center over to the right a little bit.

Move the center of the gradient

Step 5 – Add A Shine Effect

Now we are going to add a quick shine effect by creating a new layer on top of the background layer, name it “Shine”.

Add new layer

Fill it with a white to transparent gradient. To do this, select the Gradient tool from the toolbar, or hit the G key. Once you have the gradient tool selected select a white to transparent gradient from the gradient selector in the top left hand of the screen.

Select the gradient type

Make sure the “Shine” layer is selected and then using the Gradient tool, move your mouse cursor to the top of the button, click and hold the left mouse button, and drag your mouse between 1/2 and 3/4 of the way to the bottom of the document and let go.

Adding the "Shine" gradient

If you did it right, your button should now look like this:

After adding the gradient

Step 6 – Round the Shine

Now we have to round the bottom of the gradient to really bring out the shine effect by using the Elliptical Marquee Tool (M is the Keyboard Shortcut). The way I find is easiest to do this type of work, is either to make your surrounding window really big, or zoom out really far so you can create a very large round/oval marquee.

Select with Elliptical Marquee tool

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Select Inverse

Finally, click CTRL + X to cut that area off, which should leave you something like this:

After rounding the shine gradient

The last part of this step is to change the layer opacity to 50%:

Change the shine layer opacity

Which should give you something that looks similar to this:

After 50% Opacity is applied

Step 7 – Add & Style Text

Depending on the type of button you are creating, your text may vary, but since I started this tutorial out as a download button, that’s the text we are going to use.

Select the Type tool, or click (T) on the keyboard, then select the “Text” layer, and click on the button to start your type layer. Type the text “Download” and click either the Check Mark at the top of the screen, or hit the Enter Button on the Num Pad to complete the typing.

Hopefully you have something similar to this:

Create "Download" Text

But not to worry if the type if a different color, font or size as we are going to fix that up right now.

There are a million and 1 ways to style the text, but I will just do something quick and easy that generally gives smooth modern results with not much effort.

Use the Character pallette to set the Font Family to “Century Gothic”, the Font Style to “Bold”, the Font Size to “21″, the Character Tracking to 50, and All Caps.

Setting the Character Font Style

Which should give you this result:

Our new Font Style

Now we are going to add some simple layer styles to add some depth to the text:

Double click on the “Download” text layer, which will bring up the Layer Styles palette.

Click on “Drop Shadow” and set the Blend Mode to “Normal”, the Opacity to 100, the Angle to “120″, the Distance to “1″, the Spread to “0″, and the Size to “1″

Adding the Drop Shadow

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, and the Style to Linear. Make a gradient with “#FFFFFF” for the light color, and “BEBDBD” for the darker color.

Adding the Gradient to the Text

Finally, click on “Stroke” and set the Size to “1″, the Position to “Outside”, the Blend Mode to “Normal” the Opacity to “30%”, the Fill Type to “Color”, and the Color to “#000000″.

Adding the Stroke to the text

And now you should have something that looks somewhat decent.

The finished Download text

Now let’s move this over a little bit to the right and a bit up to make room for our icon, and add the smaller text. I don’t think i really need to explain how to add the small text. Just use a 12pt Century Gothic with Bold applied and voila!

After adding our small text

Step 8 – Creating the Icon

Start by creating a new layer inside the Icon group folder and name it “Circle”, and Draw a circle using the Elipse Shape tool (U)

Create a Circle with the Elipse tool

Now let’s add some layer styles to make this circle a little more interesting.

Double click on the circles layer, and click on “Inner Glow” and set the Blend Mode to “Screen”, the Opacity to “75%”, the Noice to “0″, the color to “#54BA30″, the Choke to “0″, the Size to “21px”, and the Range to “100%”

Adding an Inner Glow to the Circle

Now click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Smooth”, the Depth to “72%”, the Direction to “Down”, the Size to “4px”, and the Soften to “0″.

Adding Bevel and Emboss to the Circle

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#52A123″ for the lighter color and “#00601B” for the darker color, the Style to “Linear”, the Angle to “90″, and the Scale to “100%”.

Adding a Gradient to the Circle

And finally click on “Stroke” and set the Size to “1px”, the Position to “Outside”, the Blend Mode to “Hard Mix”, the Opacity to “66%”, the Fill Type to “Color” and the Color to “#000000″.

Adding a Stroke to the Circle

Which should leave you with something like this:

Our circle with Layer Styles applied

Next, create another new layer inside the Icon group folder and name it “Arrow”.

Hit (U) on your keyboard, and you should see a menu appear for the Shape tool at the top of your screen.

The Shapes Toolbar

Click on the “Shape” icon to reveal a drop down menu with many shapes you can choose from, and select the 3rd Arrow on the top.

Default Photoshop Shapes

Draw a new Arrow on your new layer.

Create a new Arrow Shape

Rotate it 90 degrees clockwise to make the arrow point down, make sure that the arrow is small enough to fit inside our circle.

Rotate the Arrow layer

Our newly rotated arrow

Next, we will add some layer styles to the arrow.

As usual, double click the layer, and click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Chisel Hard”, the Depth to “1%”, the Direction to “Down”, the Size to “1px”, the Soften to “0px”

Add Bevel and Emboss to the Arrow

Next click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#FFFFFF” for the lighter color and “#C9C9C9″ for the darker color, the Style to “Linear”, the Angle to “90″ and the Scale to “100%”

Adding a Gradient to the Arrow

Finally click on “Stroke” and set the Size to “1″, the Position to “Inside”, the Blend Mode to “Normal”, the Opacity to “100%”, the Fill Type to “Color”, the Color to “#FFFFFF”.

Adding a Stroke to the Arrow

Almost done! Now we just need to add a final shine to the icon to make it a little fancier.

Create a new layer, and name it Icon Shine.

Hold down your CTRL button (For PC’s) and click on the circle layer. This should create a selection the exact size of the circle.

Create a selection the size of the circle

Select your Gradient Tool (G) and choose a White to Transparent gradient just as we did earlier in this tutorial. Now drag the Gradient Tool from the top of the selection to about 1/2 way to the bottom.

Adding the Shine gradient to the arrow

Now select your Marquee Tool (M) and move the selection up a little more than halfway.

Drag the selection

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Inversed Selection

Finally, click CTRL + X to cut that area off, which should leave you something like this:

Final Download Button

And there you have it, a detailed and quite long tutorial of how to make a big Download button. You can download this file in PSD format by clicking the Download Button below.

I hope you liked this tutorial and learned something from it. Sharing is caring!

There are a lot of repeatedly used tools and options in Adobe Photoshop and some of these tools and options do have pre-assigned keyboards shortcuts, and others that do not.

After being an idiot for a while and repeating some of these tasks over and over the long way, I decided to make a set of Photoshop actions that would make my life a little easier, and cut down on production time.

I have decided to share these actions with you, and hopefully they can be of some help. They are all really basic actions, but I find by having them assigned to the Function keys, it makes getting things done less of a pain.

Here are the actions, and their corresponding function shortcut key:

F2 – Flip Horizontal
F3 - Flip Vertical
F4 - Crop
F5 - Fill White
F6 - Fill Black
F7 - Fill Menu
F8 - Select Inverse

As you can see I have assigned the F7 key to bring the Fill Menu up, some of you may know and use the Shift + F5 shortcut already. But that is a bit of a stretch for the fingers, and I know it’s not my favorite position to put my hand in. So it’s just small things like that which save a few seconds here, and a few seconds there, but you do, (at least I do) notice it add up over time.

Anyway, here is the download for the .atn file. I have only tested it in Photoshop CS3, but they are such basic actions I would imagine they would work in many versions of Photoshop.

Being a web designer, with a possible light case of ADD, i noticed that in the past I had used a different organizational method for my css files on almost every website I built. Hell, in some cases there was no organization what-so-ever.

As is often the case when you repeat a task over and over, I got better at organizing my files to make them easier for me to build and edit. I am going to share some of my organizational tips with you here today, and hopefully they will save you some time in the long run.

1. Organize CSS by page element, not by style
2. Put similar CSS elements on the same line
3. Organize CSS in order of element layout
4. Name your CSS based on structure not design
5. Comment your CSS code

1. Organize by page element, not by style

Below is an example of one way I have seen many web designers organize their CSS files.

/* Containers */
#header-container { }
#navigation-container { }
#footer-container { }

/* Links */
#header a:link, #header a:visisted { }#navigation a:link, #navigation a:visisted { }
#footer a:link, #footer a:visisted { }

/* Fonts */
.header-text { }
.navigation-text { }
.footer-text { }

So, maybe you’re thinking to yourself, “Gee Adam, this looks alright to me”. And sure, it does look visually appealing. But when it comes time to change everything in the header, your now stuck scrolling up and down, looking for each “header” element.

Instead, try using the method below and it will ensure you won’t waste time scrolling the page up and down.

/* Header */
#header-container { }
#header a:link, #header a:visisted { }
.header-text { }

/* Navigation */
#navigation-container { }
#navigation a:link, #navigation a:visisted { }
.navigation-text { }

/* Footer */
#footer-container { }
#footer a:link, #footer a:visisted { }
.footer-text { }

2. Put Similar Elements on the Same Line

If you aren’t writing your CSS on 1 line, then you can use this next trick.

Many CSS elements are related or similar to each other, and therefore, can be organized together when we write our CSS code.
Instead of this:

#header-container {
width:800px;
height:600px;
margin:0; padding:0;
}

Try this:

#header-container {
width:800px; height:600px;
margin:0;padding:0;
}

Not only does this cut down the number of total lines in the CSS file, it also makes finding and editing related elements much much quicker.

I wish I could take credit for this tip, but alas I can not. I read this tip on a blog somewhere, sometime ago. I tried looking for the article again, but I was not able to find it. If you or someone you know wrote the article, please let me know and I will gladly give credit.

3. Organize CSS in order of element layout

This is almost so obvious it’s not worth mentioning, but unfortunately I still see CSS written without any thought to having to go back and edit it later. It is similar to when car manufaturers build a part that has to have 20 other parts removed in order to reach the part you are trying to fix.

If you are only using 1 CSS file, then for god sakes, ORGANIZE! Put your header definitions at the top of the file, and your footer definitions at the bottom of the file, everything else goes in the middle.

4. Name your CSS based on purpose not design

I, like many CSS designers out there, have been guilty of naming a CSS definitions based on their design, and not by their structure and/or purpose.

For example I would name a CSS element like this:

.text-purple {}

Instead of naming the CSS element like this:

.author-name {}

The reason for this is simple, over time when you decide purple isin’t the right color for the authors names, and you want to change the purple to yellow, your CSS definition is still named text-purple which is definitely confusing.

Sure you might think to yourself, “well i can always just remember I changed purple to yellow”, but over time, and after working on countless other websites, I can almost guarantee that you will forget the change, and especially if and when there are more than one change, you will be all but lost.

5. Comment your CSS code

Commenting is one of the most important factors when attempting to organize your CSS files effectively, and there is more than one way to use comments in a CSS file.

Section Dividers
This is one of the more standard uses of comments in CSS files. Use markup like this to label different sections of your CSS file.

/*  Header */

Explanations

This is a common use for comments in programming languages such as PHP.

/* This style definition is needed to fix a problem in IE6 */

This is by no means a complete list, but it is a list of some of my favorite CSS tips!

If you have you own tips to share, please do and if I like them, I will add them to the post giving the author link credit.

How do I center a CSS Div Horizontally? This is a question I hear from my readers in both emails, and comments somewhat frequently. There are already at least 10 (probably more like 100) other websites that tell you how to do this, but the question still comes up.

So being that I am such a nice guy, I figured I would write a blog post about the subject instead of just answering emails, and comments all day.

The code to center a div horizontally is really simple. It should be noted that you MUST have a fixed width div for this to work.

#div-container {
width:800px;
margin: 0 auto;
}

The margin CSS values I used above were written in CSS Shorthand, but you could also write the code without shorthand, in which case the code would look like this:

#div-container {
width:800px;
margin: 0 auto 0 auto;
}

Now just insert a DIV into your html with the ID  given a value of div-container like is shown in the example below.

<div id=”div-container”>
Place your newly centered div’s content here
</div>

So that’s the long and short of it. Pretty simple and upfront. Hopefully I won’t get any more emails about this, but as always feel free to email or comment if you have any questions or comments.

It has been a long time since I updated the design of the site, or updating the wordpress version running it.

But finally I just took care of both problem at the same time.

Design

A whole new design, which was given so nicely by Chris Wallace, which I used for a starting point. You can check out some of his other cool WordPress Themes.

I will be doing even more extensive customizations to this design, but for now, this is a HUGE step up from the previous site. One of these days I will design a new site from the ground up for this blog, but that takes time. Time that I am not paid for, so as you can imagine, it’s not usually a top priority.

WordPress Update

Infect The System is finally using the latest version of WordPress. So far it seems to be running pretty stable, and the new interface is amazing.

Infect The System Future

I have some new Tutorials coming by request of some of the readers here. I always love more suggestion for topics, and freebies, so if you have any suggestions that you think would benefit a lot of people (not only yourself, don’t be selfish) feel free to let me know.

So this is the end of this blog for now. Thanks for reading sucker!!!

After yet another long break I’m back to give away even more free stuff!

This time I have 6 FREE Web 2.0 style badges up for grabs. But wait, why bother only giving you PNG files when I could give you the original source PSD files so you have full control over these badges.

Everyone knows those once “uber trendy” graphic badges that were on every website known to man a couple years ago. If you still haven’t grasped what I am talking about, have a look at the screen shot below.

Web 2.0 Badges

Got it now? Good. So now that we are all on the same page, why don’t you stop reading and download them already!?!

Maybe you are wondering to yourself why I would bother creating something that was popular 2 years ago? Well the answer is short and sweet. I had to make some for a client, he ended up not even using them, so I created a few more variations and decided to share them with you, my adoring fans.

If you have a small or medium sized online business, or a small or medium brick-and-mortar business to which you wish to add an online component, you’re going to need web hosting, and business web hosting can be just what you’re looking for.

What Web Hosting Is

Web hosting is the service that provides the place on the Internet where your website goes. To get a page on the web you need a web server, and few companies have their own web servers. That’s why there are companies dedicated to providing this service. These companies are called web hosting companies, and you contact them when you need a web server for your site.

Variations in Web Hosting

Not all web hosts are created equal. Which web hosting package and company you choose will depend on a variety of factors. Web hosts vary according to price, to level of involvement in your web development, to features, to amount of bandwidth and disk space provided. It’s important to choose the web host that’s right for your online or online-enabled business.

Business Web Hosting

If you’re just starting out with online marketing, business web hosting can be a great place to start. With a business web hosting plan, your website goes on a shared server, which means other companies are using different parts of the same server to host their own websites. Since your company isn’t taking up all the server space, you’re charged at a significantly reduced rate. This rate is a mere pittance; this is a few dollars a month as opposed to a hundred or more. That can make a real difference for a business that’s just getting off the ground.

Pros and Cons of Business Web Hosting

With business web hosting, you’ll get what you need to maintain a great website at a low cost. You may not have the same kind of control and flexibility that you would get if you had control of the whole server, but that’s usually not something you need starting out. As your business grows, more traffic comes in and your web development needs become more diversified and complex, you can think about different web hosting options. To start with, a business web hosting option is usually the way to go.