1stwebdesigner - Graphic and Web Design Blog » clean

Free WordPress Theme : A Simple Magazine

DynamicWP — Tue, 15 Jun 2010 10:00:04 +0000

A Simple Magazine, is a free WordPress theme with magazine style. The theme packed with 5 color schemes, 2 unique page layout, 2 custom widget, and more customization option in theme option page, make your website more unique.

A Simple Magazine is provided to user under the open source GPL License, you can use it for all your project or at least use it as a foundation for your next projects for free and without any restrictions. Please link to this article if you would like to spread the world.

A Simple Magazine is released especially for 1stwebdesigner readers.

Features

5 in 1 color schemes,
Widget ready (footer and sidebar),
Package with twitter widget and flickr widget,
Easy to setup with theme options page,
AJAX-based contact form,
Social media on sidebar,
Social share button,
Integrated plugin wp-page navi,
Automatic Image thumbnail-No custom field.

Theme Previews

Frontpage

Archive page

Contact page

Share button

Flickr and Twitter Widget

Demo

You can see the functional live demo of A Simple Magazine.

Documentation

Read the documentation page of AsimpleMagazine, to learn how to use this theme.

Download

ASimpleMagazine (ZIP, 184.2 kb)

31 Free Clean Icon Sets For Minimal Web Design

Daniels Mekšs — Sun, 18 Apr 2010 10:01:53 +0000

All clever things are usually very simple. Sometimes you just want to stay with the old valuables and keep it subtle. These icons will look great with clean and minimal web designs and also notice since almost all of them are monochromatic you can put different colors, create your own letterpress and different effects without spending time to create your own actual icon.

I think minimal and letterpress effects currently are very popular in webdesigns and many designers will find this collection useful and worth bookmarking!

1. Free Minimal Icon Set

Editable PSD file with Illustrator vectors.

2. Mini Icons

Free icon set from http://www.famfamfam.com/. 16×16 GIF.

2.1. Smooth Icon Set

Icon Set: home, help, calculator, lock, print, push pin, clipboard, scissors, key, flag, shield, pencil, tag, trash, news, info, network, credit card, money, forum, database, music, camera, video, rss, download, heart, favorite, chart, paperclip, laptop, gear, clock, star, and more.

3. Mono Icons

108 gray 32×32 PNG icons. You can customize the color. Also free for commercial use.

4. Iconic

Iconic is a minimal set of icons consisting of 114 marks in raster and vector formats. 5 different sizes up to 32×32, nice flexibility. Creative Commons 3.0 license.

5. Pictodeck

Pictodeck is a set of over 700 pictograms in vector format designed specifically for Keynote. That means you can scale them to any size you desire without any loss in quality. All of the icons also support transparency. The set was created by Aaron Richard. All are licensed slightly differently under Creative Commons.

6. Ecqlipse 2

100+ icons in various resolution up to 128×128. Also available as .ico.

7. Letter Pressed Icons

collection of over a 100 letter pressed icons, in various letter pressed styles. The icons include three PSD files which are full of icons which you can drag and drop into your designs. Creative Commons license.

8. Kostenlose Icons

9 GIF icon sets. Creative Commons license.

9. Token

128 icons in light and dark versions. Available as 128×128 PNG or ICO up to 256×256.

10. Eusmis

99 16×16 ICO files.

11. Pictoico

100 fully scalable pictograms/icons. Comes as a AI, SVG, XAR.

12. Social Media Icon Pack

22 500×500 PNGs. Free to use in commercial and personal works.

13. Wireframe Mono

244 (8 cursors) icons optimized for 16×16, 32×32, 48×48. Available as PNG, ICO, GIF. Creative Commons Attribution-NonCommercial license is free.

14. Picol

Massive set of about 500 icons. Available as 16×16, 32×32 PNG or SVG.

15. DOT Pictograms

68 free icons up to 256×256 PNG.

16. Snow Icon Pack

102 royalty free website & GUI icons that can be used for both personal and commercial purposes. Royalty free license. TIFF, ICNS, ICO, ICON, PNG. 32×32

17. UIDesign Icon Pack

51 free icons. PNG, ICO, ICNS. Designed by Alexey Egorov.

18. Pixeley

30 16×16 icons. PNG, ICO, ICNS. Created by el73.be

19. Mini Pixel Icons

320 icons available in various color themes. 14×14 GIF.

20. Pixelated

21 icon in light and dark version. Transparent GIFs.

21. 165 Lovely Free Vector Icons

AI, SVG, JPEG.

22. 135 Free Vector Icons

AI files.

23. Mini Icons

113 10×10 GIFs. Creative Commons Attribution-ShareAlike license.

24. Doctype Icons

42 16×16 GIFs

25. BWPX.ICNS

A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. Creative Commons license.

26. Splashy Fish Icons

450+ 16×16 PNG icons.

27. Hand Pointer Icons

36 icons, 6 different types, 6 color variants.

28. Silk Companion

450+ 16×16 PNG icons.

29. Symbol Signs collection

Available in OpenType font format.

30. Diagona Icons

200 PNG icons. 10×10, 16×16.

31. 30 Free Vector Icons

Icons with apple touch. PSD file.

Do you know some more free minimal icon sets? Let us know!

Learn How To Create A Clean Layout In Photoshop [Very Detailed]

Mkhaled — Mon, 08 Feb 2010 11:10:49 +0000

In this Photoshop tutorial we’ll learn how to create a clean looking website layout, we’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this layout creation process. I am explaining all small steps and every step is shown by visuals as well, good luck!!

Final Outcome

Here’s a preview image of what we’ll be creating together, Click the image to enlarge.

Creating New Document

We’ll be using 960s Grid system (Download here ) once downloaded open up the file 960_grid_12_col.psd; then right click on the “Background” layer >> Layer from Background. and call it “bg”.

Creating the background

Let’s starting creating our background, select the Gradient Tool (G) in the Gradient Editor panel set your colors from #dcdcdc to #ffffff:

Now with a Linear Gradient drag from down to top. Use the image below for reference:

You should have something like this:

Creating the logo area

Before we start creating our logo we need to set upper borders for our design, so we’ll drag a new Horizontal Guide after 50px. to do that go to View >> New Guide and follow with the image below:

It’s time to create the logo tag; we’ll start by creating a selection – I personally have use Polygonal Lasso Tool (L) – make about it 280x40px try making something similar to this:

Now click Shift+Backspace to fill it (with any color just in case).

We’ll give this tag a smooth gradient; from #efe352 to #db1b47 – check the image below:

Write your name with the following settings:

Font: Rockwell (it’s famous just Google it!)
Size: 46px
Type: Regular
Color: #1e1e1c
Anti-aliasing: Strong

Here’s how it should look!

Now create another selection for the catch tag, about 270x40px, something like this:

Fill it, and give it the same smooth gradient – that we’ve given to the name tag – and we’ll just add a Drop Shadow:

Now add your kickass catch with the following settings:

Font: Rockwell
Size: 33px
Type: Regular
Color: #1e1e1c
Anti-aliasing: Strong

Here’s how it should looks!

Before we move forward to the next step, make sure that all your layers are well-organized, and grouped. Here’s how mine looks:

Creating the navigation

We’ll start by creating a small rectangle, select the Rounded Rectangle Tool (U) and create a rectangle of about 65x30px – Radius: 5px.

Now let’s give it Inner Glow, Gradient Overlay, and Stroke. see the image below!

Add some navigation text, with these colors: #ffffff – #1e1e1c:

Select the navigation text layer and the small rectangle layer, then click on Align Vertical Centers in the control bar.

Before we move to the next step, group your layers!

Creating the featured designs area

First off let’s set our borders; drag a new guide at the end of the catch tag, leave 50px and drag a new one!

Writing welcome text

Write some text, with the following settings:

Font: Rockwell
Size: 30px
Type: Regular
Color: #e8204e – #676666
Anti-aliasing: Strong

Drag yet another guide after 50px:

Creating images of featured designs

We’ll start working on the images; create a selection of 250x150px and align it like the following:

Fill your selection with any color, and give it a Stroke with the following settings. the call it “pic_holder”.

Let’s add an image of a featured design, go to File >> Place and place an image from your computer.
Make sure that the layer of the image is right above the layer (“pic_holder”) of the rectangle we created
Now right click on the image layer >> Create Clipping Mask.

It’s time to create a shadow for our image! with the Elliptical Marquee Tool (M) create a selection like the one below; set your foreground to #1e1e1c then click Shift+Backspace to fill it.

Now go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Go ahead and make another copy of the image we’ve created and align it to the right.

We’ll make the center image a bit bigger; so create a selection of 340x200px and align it like this:

Repeat the same previous steps. finally you should have something like this:

Don’t forget to group all your layers!

Creating the sliding arrow

Now let’s create the sliding arrow, use Custom Shape Tool (U) to create an arrow with this color value #e8204e.

Now give it the following layer styles:

To align our arrow, we’ll select its layer and the layer “pic_holder” then click on Align Vertical Centers in the control bar.

Make a copy of the arrow and align it to the right.

Creating the upper content area

Start by dragging a new horizontal guide at the end of the featured area, leave 50px and then drag another one!

Add some text as a title (I’ve written “who we are”) use the image below for reference.

Drag two new horizontal guides according to the following image.

Add some text with these character settings.

Now drag yet another horizontal guide according to the following image.

Using the Rounded Rectangle Tool (U) create a rectangle of 100x30px – 5px radius. Give it the following layer styles.

Now create a circle and an arrow inside it.

Write the word “read more” with this color value #3e3e3e and give a Drop Shadow according to the following image.

Let’s create the separating line! create two lines next to each with the following color values: #ffffff – #979797:

Then align it according to the following image

Now write a title for the right part (I’ve written “featured services”):

Select the Ellipse Tool (U) and create a circle of 20x20px (fill it with any color) then give it the following layer styles:

Using the Custom Shape Tool (U) create a check shape and fill it with #dcdcdd:

Let’s give create a shadow for it! create a selection (like the one below) and fill it with #000000 then go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Add some text of a featured service, character settings goes according to the following image:

Make two copies of the featured service:

To align the three services, put each of them in a separate group, select the three groups and then click on Distribute top edges:

Creating the lower content area

We’ll start by dragging a new horizontal guide after 50px:

Write another title, and drag two guides, use the image below for reference:

Then drag another guide according to the following image:

Now write some text according to the following images:

Duplicate the text you’ve written, then align it like the following:

To create the separating line; create two lines on top of each other, fill them with #ffffff – #8d8d8d:

I think the best way to align the separating line is to do that visually. However, I have my own way of doing that! create a rectangle (like the pink one below) and while having the layer of the rectangle and the separating line selected; click on Align Vertical Centers in the control bar.

See how it works! ;)

Now repeat the same previous steps to get something like this!

Creating Social Media links

Now add the third title, Facebook icon, and write a link beside it. You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

While having the link layer, and the icon layer selected click on Align Vertical Centers.

Make three copies of what we’ve created in the previous step. put each of them in a separate group, then select the four groups and click on Distribute Top Edges.

Creating the footer area

Drag a final guide after 50px.

We’ll start by creating another separating line, create two guides on top of each other and fill them with #ffffff – #8d8d8d.

Then align the separating line like following:

We’re almost there! add your sub navigation text according to the following image:

Finally add your copyrights text with the same character settings:

Conclusion

There we have it! We’ve created a clean and simple layout in Photoshop. Hope you enjoyed it!

You can download free, layered *.PSD version here!

43 Minimal And Really Clean Free WordPress Themes

Dainis Graveris — Sun, 29 Nov 2009 02:00:55 +0000

In early days blogs were supposed to be simply online diaries and way how to write your thoughts without any business purpose. I will start to write personal blog in my own language as well and that’s because I wanted to find out how many simple and minimalistic themes are available for WordPress. Certainly I got again more than expected, but I tried to narrow article and be picky, but I still got 43 interesting and simplistic themes.

Enjoy typography, white color, grid, white spaces and remember – very often simply good typography and great use of white space is a lot better than theme overloaded with effects, colors, images and too much CSS styling!

1. Hybrid Minimalist WordPress Theme Framework

Everybody should know about this framework, which can be used as excellent minimalist type theme as well!