Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

Dec 4th in Interface by Collis
63

This year has seen a big increase in grungey / textured / hand-drawn styled website designs. By nature I tend to design a cleaner look myself, but I thought I’d try my hand at grunge today and write up a tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

Then later this week we’ll take this same web design and I’ll show you how you can take remixing even further than just changing backgrounds and colour schemes, that in fact you can change the entire style of a design. But first let’s make our paper texture site!

Continue Reading

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Dec 2nd in Interface by Collis
145

It’s pretty amazing how much colour and background can change the look and feel of a website. In this tutorial we’re going to put together a quick, simple but effective layout and then create variations using backgrounds, photos and patterns. We’ll also look at how to make seamless tiled backgrounds out of a photo, methods for ending a single photo and simple ways to create pixel patterns. In short it’s a jam packed tutorial!

Continue Reading

How a Turn a Texture into a Seamlessly Tiled Background

Dec 2nd in Interface by Collis
49

Tiled backgrounds are great for both website backgrounds and in all kinds of Photoshop work. They are particularly useful when working with textures where you need a larger overall background than the small image you have to work with. In this quick tutorial I’ll take you through taking a texture and turning it into a background image ready for seamless tiling. It’s a useful little technique that’s been around forever. We need this technique for today’s other tutorial - How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds.

Continue Reading

Preview

How to Create a Grunge Web Design in Photoshop

Sep 24th in Interface by Alvaro Guzman
141

Photoshop is often the right tool for web design, especially if you’re creating a design using numerous images and brush effects. In this tutorial, I’ll show you how to create a complete grunge home page design. We’ll design the header, sidebar, body, footer, and style everything to work together in a heavily textured and worn design.

Continue Reading

From PSD to HTML - Site Build over at NETTUTS

Jun 19th in Interface by Collis
30

As many of you will remember some weeks ago we posted a PLUS members tutorial here called Designing a Family of Websites and promised an upcoming PSD->HTML tutorial on it. Well I’m happy to say, that after a 10 hour marathon, the tutorial is ready! Continue Reading

Sitepoint has Released a Free Complete Photoshop eBook

May 19th in Interface, News by Sean Hodge
50

Some quick news about a free Photoshop eBook giveaway. Download a full PDF of Sitepoint’s Photoshop book that is targeted at entry-level Web designers. More information about this no-strings attached download after the jump.

Continue Reading

Create a Dark Themed Web Design from Scratch

May 13th in Interface by Tyler Bramer
85

This tutorial covers the key areas to focus on when creating a Web site design. This is a blog-style design, but the techniques and strategies used in this design could be applied elsewhere across the Web as well. Learn how to create a colorful design set against a dark background.

Continue Reading

Create a Sleek, High-End Web Design from Scratch

Apr 26th in Interface by Collis
179

In this tutorial, we’ll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.

Then when you’re finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let’s rock’n'roll!
Continue Reading

Design a Cartoon Grunge Web site Layout

Apr 19th in Interface by Chan Kai Loon
96

Learn how to add a worn look that works well with cartoon-style graphics. Different flavors of grunge styles are popular all over the Web right now. Learn a unique approach to wear and tear that you can incorporate into your next Web site design.

Continue Reading

How to Create a 3D Shelf Element Similar to Dragon Interactive

Mar 26th in Interface by Arik
55

In the reader suggestions recently, I found a request to see how to produce the shelf interface on the incredibly cool Web site for Dragon Interactive, a Los Angeles–based creative agency. So here’s a method for producing the shelf effect. Continue Reading

Page 1 of 212»