Texture in Web Design Part 2: Pixel Patterns, Noise, and Grain

Wednesday, September 15th, 2010

We began this two part series on texture in web design by talking about text and button textures, and how they can be used to inset, or outset page elements. These help to add more depth and subtle aesthetics to your designs, making them look more professional and polished. This week, we’ll be showing you how to add texture to other page elements such as your backgrounds / content areas, as well as how to use pixel patterns to make your text and box-shadows more interesting.

Noise and Grain

Noise and grain is all over the web at the moment, with some big players in the design community using it very effectively in their designs. A good example of this is Dribbble. If anyone doesn’t know what Dribbble is then you can read about it in this post.
(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: dribbble, photoshop, texture, tutorial
Posted in Tutorials, Website Design | 5 Comments »

Texture in Web Design Part 1: Inset / Outset Elements

Tuesday, August 24th, 2010

A growing trend amongst top web designers is to use an assortment of subtle textures in their work. This helps give depth and, even if you don’t notice them at first, add an extra degree of complexity and intrigue to a design. If used intelligently and effectively (and by that I mean tastefully!) textures can really lift a website to the next level.

Over the next two weeks I will walk you through a range of techniques that can be applied to many different elements of your designs to give them just that extra bit of style…

This week we’ll be mostly talking about insetting and outsetting page elements in Photoshop (and CSS3), as well as covering how add these effects to non-vector patterns without having to manually cut them out!

Inset / Outset Text & Objects

This is a pretty simple one really and it works on almost any style of font. For both effects you begin in the same way… First, type out your text and select your colours / background colour in Photoshop. Then, in your layers pallet double click the far right of the text layer that you want to apply the effect to. A Layer Styles box should open…

(more…)

Tags: css3, photoshop, texture, tutorial, webdesign
Posted in Tutorials, Website Design | 1 Comment »

HTML5 for Beginners. Use it now, its easy!

Tuesday, February 23rd, 2010

Ok, so there are a lot of articles out there on HTML5, especially since Google Wave arrived (because it’s the first major app to run on the language), but all the information that you need to know in order to start using it now is either too complicated, or spread out over various websites / articles / tutorials. Hopefully in this article we’ll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.

html5.0

Before I start I’d just like to say a big thank you to the Speak the Web guys who put a series of talks on in the north of England over the last two weeks. The gigs each had a speaker from Opera (amongst others) who enlightened many of us to the true potential of HTML5, and why we should start using it sooner rather than later.

(more…)

Tags: chrome, firefox, Flash, HTML, internet explorer, javascript, jQuery, safari, SEO, webdevelopment
Posted in Tutorials, Website Development | 31 Comments »

Styling HTML Emails with Disabled Images

Wednesday, February 10th, 2010

The styling and formating of marketing emails is a fine art, but many people are missing a key factor with their design and build that may make or break the user’s decision to view the email in its entirety…

We are all familiar with an email dropping in our inbox and appearing as blank white space:

ebuyer

The above image is an example of emails not being designed and built to work with images disabled. To help with explaining this process I have built a quick email to illustrate how alt tags can be styled, cells coloured, and text positioned to produce a professional looking email before any images have been downloaded. By using these techniques the user will be given an impression of the message, and an incentive to turn on images and view your email in it’s entirety.

(more…)

Tags: email, HTML, marketing, webdesign, webdevelopment
Posted in Email Marketing, Tips, Tutorials | 7 Comments »

What Creative

Our Blog: What!? We Like To Talk About

Archive for the ‘Tutorials’ Category