Posts Tagged ‘photoshop’

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: , , ,
Posted in Tutorials, Website Design | 1 Comment »

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…)

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: , , , ,
Posted in Tutorials, Website Design | 1 Comment »

Web Design For The Browser, Not The Printer

Thursday, April 1st, 2010

One of my pet hates is when designers preview the websites they’re working on as an emailed .jpg, rather than as an HTML file within the browser (which usually results in it being printed by the client). A design looks completely different when it’s printed out to how it does on the screen - not only are you printing a 72dpi / RGB design, but a printer renders text and images completely differently to a monitor. A website is a piece of interactive digital artwork and so should be shown in this way, even in the first stages of it’s development. Seeing as though 1024 x 768 is still the most popular screen size, when presenting your designs you should obviously make sure they work at this resolution, but by putting your design in a HTML file you are able to present it in any number of resolutions - Go on, impress your client by going that little step further and help them see that their site will look different, but just as great, on their computer compared to your 27″ iMac! ;-)

(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: , , , , , , , , ,
Posted in Tips, Website Design, Website Development | No Comments »

Make Your Images Curl Off The Page : Photoshop Tutorial

Tuesday, October 20th, 2009

In this quick and easy tutorial I will show you how to create the ‘lifting corner’ effect that you can see in other areas of this website in 10 simple steps.

It’s really easy so even beginners can do it, and it adds a nice effect that’s a bit different from your standard Drop Shaddow or Outer Glow solutions to making images stand out.

Lifting Image Corners Complete

1: Create a new document in the size that you want, remembering that the final area of the image will need to be about 10px from the bottom. For this example I will be using a document size of 250 x 250px.

New Document

2: Open your selected image, Select All (cmd + A / ctrl + A), select your new document, and paste it inside (cmd + v / ctrl + v).

(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: , ,
Posted in Tutorials | 8 Comments »