Design Woop | The Web Design and Development Blog » Photoshop

15 Light & Subtle Background Patterns

David — Mon, 21 May 2012 07:00:00 +0000

On a recent design I was working on I wanted to use an extremely subtle and light texture on the background to create a little more depth and dimension to the background, rather then simply just using a solid background color. I tested out many different background textures and patterns so I thought I would share with you some of my favorite light background patterns you can download and use.

Light Mesh

First Aid Kit

French Stucco

Rough diagonal

White Wave

Light Sketch

Farmer

11 Light Subtle Patterns

35 Tiny Pixel Patterns

Minimal Patterns 1

Text2Res3

Minimal Patterns 2

Paper

Church

Cross Scratches

20 Free Subtle Textures for Backgrounds

David — Mon, 12 Mar 2012 08:00:00 +0000

Textures play big role in today’s web design world. I am talking about the subtle textures and patterns sometimes even used as minimalism attributes in web design and mostly used for website backgrounds. There are few reasons why designers are using these textures in their work. Subtle textures are popular among designers because it is a good way to add depth, detail, and give personality to website. In this compilation I would like to share with you 20 free subtle textures and patterns for using as website backgrounds. Hopefully you will find this collection useful for your future projects.

Apple iOS Linen Texture

Technical drawing paper texture

Beautiful Wood Texture

Blueprint Texture

Cardboard

Seamless leather texture

Beautiful Wood Texture 2

8 Seamless “Light Metal Grid” Patterns

Carbon Fibre Photoshop Patterns

20 Seamless Photoshop Grid Patterns

Subtle Grunge Patterns Vol. 1

Free Web Backgrounds

Seamless Tartan & Plaid Patterns

Psd Carbon Fiber Pattern Background

Seamless Grunge Patterns

Subtle Dark Vertical

Texturetastic Gray

Wood pattern

3px tile

Floral patterns

How to Create a Clean and Stylish Login Form In Photoshop

David — Mon, 11 Apr 2011 07:00:10 +0000

This is the first post in a two part tutorial, in this post I will walk you through how to create a clean and stylish login form in Photoshop, next week I will code the login form from the design concept into HTML/CSS3. Grab the RSS feed to catch the next post.

The Final Design

Getting Started

Open Photoshop and create a new document – File -> New. I set the my canvas size to 400x300px but you can make yours as big or as small as you wish. Create a new layer called ‘background’, set the background color to #4b4950 and add a sublte amount of noise to the background layer – Filter -> Noise -> Add Noise -> 3.

Typography

I wanted to keep the typography for this form modern and contemporary and quickly settled for Miso.

All the type in the form design is Miso, the actual text field value will be Arial.

Set the font tracking/spacing to 250 and set the font size to 14 pt, I will be using the font color #ffffff and the will set the weight to ‘bold’.

Creating Inputs

To create the text field inputs, use the ’rounded rectangle tool’ in Photoshop, you will need to set the border radius to 4 px and create the input field to the dimensions of 279 x 27 px. Set the background color of the rectangle to #303030 and create an ‘inner shaddow’. Layer -> Layer Style -> Inner Shadow.

Add the Labels

Style The Submit Button

To create the submit button, again use the ’rounded rectangle tool’ in Photoshop, you will need to set the border radius to 1 px and create the button 79 x 24 px.

Create a gradient overlay for the button from color #303030 to #3a3a3a – Layer -> Layer Style -> Gradient Overlay.

Finishing Touches

I decided to finish the form off with a couple of subtle minimal icons, these lovely designs were created by Some Random Dude, you can download them for free!

I added a very subtle effect to the minimal icons, for each icon add a ‘drop shaddow’ with these settings.

Next week, I shall code this up using some CSS3! Subscribe to the RSS feed so as not to miss it…

Favourite Links 1

Stu Greenham — Thu, 31 Dec 2009 13:34:12 +0000

I am going to start a set of weekly posts that will show you my favourite links I have found, been sent or have used myself at some point. Please, if you have time to take a few minutes to help spread my posts using the share links at the bottom of the page I would be very greatful! Right heres my #1 set of links….

New Growl Styles

Visit Source: http://fixedgear.ca

Christopher Lobay has posted two new notification styles for the popular Mac app Growl which can be downloaded for free.

10 Fresh Must Read Blogs For Creatives

Visit Source: http://www.inspiredm.com

InspiredMag have posted a great article showcasing 10 ‘Must Read’ blogs that are great for us ‘Creatives’. There are some great reads here and lots of useful resources worth bookmarking.

Exobotics

Visit Source: www.exopolis.com

A very clever site built in Flash that lets you build a robot (Cool I know) and then bust some moves with it to a nice dance beat. Give it a try, very cooly designed!

35 CSS-based Layouts that Look Awesome

Visit Source: http://net.tutsplus.com

Nettuts+ posted a article showcasing 35 awsum CSS based websites! Another great article to bookmark for inspiration at a later date. There is a whole range of differently styled sites here so something for everyone.

Outstanding Website Background Guide: 60+ Impressive Resources

Visit Source: http://www.noupe.com

Noupe’s article on Website Background’s offers tonnes of great links and resources for getting the perfect website background. There are plenty of Tutorials, Texture Packs and Links where you can get loads of free background tiles/images.

30 Website Navigations that Make You Wanna Click It

Visit Source: http://webdesignledger.com

Web Design Ledger (One of my favourite subscribed to websites) posted this awesome article showcasing 30 Websites with class Navigation menu’s. A great post and really good source of inspiration when building a design concept.

Hacked STOP Signs

Visit Source: http://www.urlesque.com

Great set of Stop Sign’s that have been modified and there are some funny ones! My favourite is “STOP! Hammertime!”.

Rio Ferdinand Online Magazine

Visit Source: http://www.rioferdinand.com

Not design related but a cool site anyways. Footballer Rio Ferdinand has started an online magazine which is a great read. He interviews different celebs each edition and covers alot of general stuff.

24 Ways: CSS Animations

Visit Source: http://24ways.org

Tim Van Damme posted this cool article on 24ways about CSS Animations, showing you how to create one yourself. A great read and this is definately going to be something that we will start to see more and more of.

7 Open Source And Free URL Shortener Scripts To Create Your Own

Visit Source: http://www.webresourcesdepot.com

Web Resource Depot posted this article reviewing 7 open source URL Shortener scripts that are all free. I went for Yourls myself but a handy link for anyone else wanting to get on the URL Shortening bandwagon :)