background preloader

Grunge

Facebook Twitter

How to Create a “Worn Paper” Web Layout Using Photoshop. In this tutorial, you’ll learn how to create a textured "worn paper" web design theme using some basic Photoshop techniques.

How to Create a “Worn Paper” Web Layout Using Photoshop

The design incorporates some free stock images to let you create a beautiful layout in a jiffy. Final Result Click on the image to view the full-scale final result. Downloads You can download the associated source files of this tutorial below. worn_paper_web_layout.zip (ZIP, 6.38 MB) Setting up the Photoshop document 1 The first thing we want to do is create a new document with the dimensions of 1024px x 1050px. Setting up the background 2 Next, choose your Paint Bucket Tool (G) from your Tools pallete and fill the Background layer with #F9E9BB. 3 Now we want to add a stock photo to our background. Creating the main navigation 4 Next, we’ll work on our navigation. 5 Now, this part is a bit tricky. 6 Lower the opacity of that layer to 85% so the background will fade through a bit. 8 Let’s work on displaying the active/mouseover link. Designing the RSS feed link The Logo. How to Create a Grunge Web Design Using Photoshop.

In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop.

How to Create a Grunge Web Design Using Photoshop

This tutorial is geared for beginners and intermediate-level Photoshop users. This is a two-part tutorial series that will show you how to create a grunge web design using Photoshop, with the second part as a follow-up web development tutorial providing you instructions on how to convert the design mockup to a fully-functioning web page using standards-based HTML and CSS. Update: The second part of this tutorial series has been posted: Part 2: How to Code a Grunge Web Design from Scratch Final Result Click on the following image to view the full-scale version of the design that we will be creating together in this Photoshop tutorial.

Setting Up the Photoshop Document 1 Create a new document in Photoshop with the dimensions 1200px x 1160px and with the document settings shown in the following figure. Creating the Layout’s Background. How to Design a Band Website Layout in Photoshop. In this tutorial, you’ll learn step-by-step how to design an awesome band website that any rock and roller would be proud to call their own.

How to Design a Band Website Layout in Photoshop

The theme is grungy and worn-and-torn and we’ll use a handful of freebies along the way. Final Result Clicking on the image below to see a full-scale version of the band website we’ll be creating. Create the Photoshop document 1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall. 2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Working on the rough background 3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. 4 Now we’ll add a texture and start to build up some layers in the background. This image isn’t quite wide enough to fill the background space (I like a full image background to be 1600 pixels wide and this one doesn’t quite cut it). Photoshop a Paper Texture from Scratch then Create a Grungy Web Design with it! This year has seen a big increase in grungey / textured / hand-drawn styled website designs.

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

How to Create a Grunge Web Design in Photoshop. Photoshop is often the right tool for web design, especially if you're creating a design using numerous images and brush effects.

How to Create a Grunge Web Design in Photoshop

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. Step 1 This time we're going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial, I'll skip the explanation of some basic steps. Go to Image > Canvas Size and increase the width and height a lot more, 1200 px by 1000 px is OK, this way we'll be designing for wider screen resolutions. Let's imagine this design is destined for a Wordpress template, so we'll need a header, a navigation bar inside the header, and a right sidebar.

Step 2 Now we're going to create a pattern for the header's background, which is fairly simple. Step 3 Step 4 Step 5. How To Create a Green Grunge Web Layout. In this tutorial I will show you how to create a green grunge layout.

How To Create a Green Grunge Web Layout

There are over 60 steps, so it may take quite a few hours to finish. Before we begin, take a moment to download some grunge brushes for use with Photoshop. There are a lot of them on many websites on the internet. Here are some high quality brushes that you can use: You will also need to download some leaf images.