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. 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. 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 9 Create a new layer. 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. 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! 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. 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. First create a new document 950 px by 800 px at RGB 72dpi. Show the rulers and drag four guides bounding the document, this will be the optimal area of the design.
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. 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 Step 6 Step 7. How To Create a Green Grunge Web Layout | Web Design Dev. In this tutorial I will show you how to create a green grunge 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. Step 1 Create a new document in Photoshop with the dimensions 1200px by 490px. Step 2 Create a new layer and use the Rectangular Marquee Tool (M) to create a selection like I did. Step 3 Create a new group (Layer > New > Group) and name it “brushes.” Step 4 Repeat the previous step using a different brush and the color #d46300. Step 5 Use the Rectangular Marquee Tool (M) to create a selection like I did. Step 6 Use the Rectangular Marquee Tool (M) and create a selection at the top of your document. Step 7 Step 8 Step 9 Create a new group and name it “brushes.” Step 10 Step 11 Step 12 Step 13 Step 14 Step 15 Step 16 Step 17.