Free Photoshop Files & Free PSD Templates

DOWNLOAD THE .PSD FILE

In this free PSD file of websites buttons you will find a rainbow of free buttons. In the Photoshop file, they are all submit buttons; however, this PSD file is also a general websites buttons template file! All layers are non-destructive and all text is editable! All you need to do is find the button you want to use, enter in your text, and resize the background and BAM! You have your own custom button in seconds.

These free buttons were created with a range of color palettes and background colors in mind. No matter what the theme of the site is, one of these buttons will work seamlessly. Below you can find a full size preview of the web design buttons:

40 Free Websites Buttons by Chapolito

40 Free Websites Buttons by Chapolito

For those of you who are new to Photoshop, user interface design, and/or web design, I think you will find it helpful to examine the layer effects of the buttons. You will notice that different combination of roughly the same effects were used to create the web 2.0 look of the buttons, I encourage everyone to experiment and find what looks best for the site they are working on.

I would stress that the most important thing to remember when designing a button is that it presents itself to look like button — that way, there is no confusion for the users. This effect is mostly created with gradients, drop shadows and strokes. Studying the subtle effects of websites buttons around the internet is a great way to get accustom to common approaches (commonly known as patterns).

The fonts used in this buttons template are Museo and Helvetica.

DOWNLOAD THE .PSD FILE

Solely for practice, I fully designed a template layout in Photoshop for the fictitious company “Elevator Tools,” and am offering the web PSD template for free. The design is intended for a corporate web site, but with a few tweaks I’m sure you could turn it into a number of different web sites.

You can view a preview the free template layout in the image below:

full view of the corporate web design

full view of the corporate web design

I think many of the people downloading this PSD file are designers looking to learn from the layout or incorporate parts of it into their designs, and I encourage both! This web PSD template is offered free and without limitations for use in your personal, commercial, and metaphysical works.

Once you download and open the layout in Photoshop, you will see that all the layers are clearly organized and labeled. You should have no problem navigating the PSD file and I hope you will — if you don’t already — start employing some of the organizational methods used. If your PSD will ever make it into the hands of fellow web designers or developers, they will love you for keeping the file organized!

detailed view of the corporate web design

detailed view of the corporate web design

The fonts used are Verdana and Rockwell. If you do not have Rockwell, a simple Google search should turn it up. When it comes to web-safe fonts, I’m a big fan of Verdana — both for its legibility and clean characters. Rockwell is an awesome typeface, but I wouldn’t want to read more than a couple lines set in it. This is why Rockwell works great in small amounts, such as for big titles that need a little extra flair. You will notice in the PSD file that, with the exception of buttons, only instances of Rockwell have effects applied to them. This is, of course, because Rockwell is not a web-safe font.

This web design layout was the starting point for an extensive tutorial I wrote for PSD Tuts+ titled How to Elevate Your Web Design Process and Results. For more details about the thought process and Photoshop techniques employed to create this template layout, please refer to the tutorial.