create an 80s-style underground gig poster effect

Derek Lea shows you how to combine Photoshop with ‘traditioinal’ technology to create an 80s-style underground gig poster effect.

When it comes to editing images for use in websites, more often than not, we’re trying to achieve perfection within Photoshop. But every once in a while, a task comes along that demands something different.

In this tutorial, we’re going to show you that to achieve that gritty, street-level look, you needn’t bother trying to find a filter that does it for you. You simply need to be willing to venture down the street, find the cheapest, least impressive, cornershop photocopier and treat it as your primary artistic tool.

What you see before you is a splash page design for Canadian rock band The Weekend. The band requires a welcome page that’s as unrefined as their bare-bones rock ’n’ roll. They’re the type of band that sticks up DIY photocopied posters around town advertising the next gig. Taking this as our cue, we’re going to mimic this style by combining Photoshop with an old photocopier. For a more pronounced effect, photocopy your photocopies several times, crumple up the pages and then copy them again!

Step 1: Adjust levels On the CD, open ‘photo.psd’. To bump up the contrast, create a new levels adjustment layer via the menu at the bottom of the Layers palette. Drag the Input Levels slider to the right, darkening the shadow areas. Drag the middle slider to the right to lighten the midtones. Click OK.	Step 2: Duplicate the background Duplicate the background layer by dragging it on to the ‘Create a new layer’ button. Drag the duplicated layer to the top of the stack and change the Blending mode of the layer to Overlay in the Layers palette. This increases the image’s saturation and contrast.	Step 3: Remove the colour Because we’re going to print the image in black-and-white and photocopy it, it’s a good idea to preview the image in greyscale. Create a new hue/saturation layer from the drop-down menu at the bottom of the Layers palette and decrease the saturation by 100.
Step 4: Increase contrast and print Because the image is still lacking contrast, we now need to create a new levels adjustment layer. Do this using the same method as we showed you in the first step. When you’re happy with the result, print out the file using your own printer.	Step 5: Create a polygonal selection Using the Layers palette, create a new layer. Drag it up above the others in the palette. Select the Polygonal Lasso tool. With the new layer targeted, press D to set the foreground to black. Create a polygonal selection that surrounds a band member’s face area.	Step 6: Fill the selection area Now add more polygonal areas to the existing selection. Be sure to add a polygonal selection area to every area where skin appears. When you’re finished, type Alt+Delete on the keyboard. Once the selection is filled, disable the visibility of all other layers.
Step 7: Show and hide selected layers With just this layer visible, print the file. This will be scanned in later, after it’s photocopied, and used for the basis of the skin colour. Hide the currently visible layer and enable the visibility of all other layers. Create a new layer and target it in the Layers palette.	Step 8: Print a second polygon layer On the new layer, draw a polygonal selection around a piece of clothing. Draw more selections over the top of other members' clothing. Fill the selection with black on the current layer. Hide all other layers and, with only the current layer visible, print the file again.	Step 9: Print and create a new file Create a new layer using the Polygonal Lasso tool to define areas, and fill them with black. Create black polygons over details, such as jewellery and sunglasses. Hide the visibility of other layers, and print. Save and close the file, then create a new file for the next phase.
Step 10: Generate selections Enable the Paths option in the Tool Options bar. Create a rounded rectangle path. Generate a selection from the path. Fill the active selection with black. Use the Marquee tool to click and drag the inside of the selection border to another location. Fill the selection with a gradient.	Step 11: Fun with type Try entering text with a white fill then adding a stroke effect from the list of styles at the bottom of the Layers menu. Duplicate the layer, remove the effect, then fill the text with black. Generate a selection from the layer, move the selection to a different area and fill it with a gradient.	Step 12: Print and photocopy Use the rest of the canvas area and the methods you’ve employed so far to add the rest of the text and other elements you want on your splash page. When you’re finished, print the page. Make photocopies of all your printouts until the desired roughness is achieved.
Step 13: Create a new file Scan your favourite photocopied results and then create a new file, but keep all of your scans open. Specify a pink background colour. Go to your scan of the band photo first. Use the Polygonal Lasso tool to select them. Choose Edit > Copy and return to your new file.	Step 14: Paste the band Paste the copied image into your working file (Edit > Paste). Change the Blending mode of the layer to Multiply. Use the Move tool to position the layer in the centre. Go to the scan of the skin areas, select and copy them, then return to the working file. Go to the Channels palette.	Step 15: Create an alpha channel Click ‘Create new channel’ in the Channels palette. Type Ctrl+I to invert it. Paste the copied image into the new alpha channel. Ctrl+click the Channel icon to generate a selection from it. You might need to invert the selection by typing Ctrl+Shift+I.
Step 16: Fill the new selection Create a new layer in the Layers palette. Choose a light pink as your foreground. Fill the active selection with this colour. Drag the layer beneath the black layer in the Layers palette. Type Ctrl+D to deactivate the selection. Position the layer so it lines up with the band photo.	Step 17: Repeat the process Open the scan of the black clothing polygons. Select and copy the desired areas. Return to the working file. Create a new alpha channel. Invert it and paste your selection into it. Invert the selection. Create a new layer. Fill the selection with blue. Move it beneath the black layer.	Step 18: Select the rectangle Deactivate the selection and position the layer. Repeat this process again with the scan of the black polygons, using green. Go to your scan of the other image elements. Copy the black, rounded rectangle. In the working file, paste it into a new inverted alpha channel.
Step 19: Alter the layer As before, fill the selection with colour on a new layer. Drag it beneath all other layers. Increase size using Free Transform. Select the rectangle with a gradient. Create a new layer with a green area based on the copied shape. Change the Blending mode to Overlay. Increase the size.	Step 20: Add logo Copy and paste the Weekend logo from the other file into the working file as a new layer. Change the Layer Blending mode to Multiply, use Free Transform to adjust size and drag it to the top of the stack in the Layers palette. Return to the other file and select the two lines of intro text.	Step 21: Repetition Use the methods above to copy the selection, bring it into the working file, create a channel-based selection, then fill it with colour on a new layer. Add the colour fill to the inside of the logo on a series of layers, tweaking as you go.

Photoshop CS3 - Background Erase Tool

The erase background tool is powerful, but good results are only possible if you understand how it works. In this tute, we will look at all the options in the tool and use them to extract backgrounds from our images.

The tool works best if the background is all a similar colour, for example, someone against a solid colour or a bright sky.

1I have deliberately chosen a difficult image, as the girl has flyaway hair that i want to keep.

2From the toolbox, select the background eraser tool

3When the tool is selected, the control palette will display the default settings. Select the 3rd button, Sampling:Foreground Swatch This will only erase the foreground colour. Set the tolerance to 25%
Make sure Protect Foreground Colour is ticked.Selecting the option Sampling:Foreground Swatch allows you to sample the background colour most prominent in your image, so the eraser will ignore contrasting colour pixels.

Choosing to Protect Foreground Colour allows you to sample a foreground colour to protect from the eraser.

4Now we need to sample the background colour to erase. Select the background swatch in your toolbox, and double click to bring up the colour panel.

5Select the background colour with the eyedropper, right click to select a 51X51 average. This will make sure that the area sampled will be larger than just one pixel, so many shades of light blue will be included instead of just a singular blue pixel.
Next, select the foreground to protect (we will start with the girl’s hair) I will use a 11X11 average for this. Notice the colours on my background and foreground swatches.

6Choose a nice big size for the brush. Use CTRL (CMD) and the bracket keys({}) to change the brush size.

7Think of the brush as a sort of magic wand tool, that erases selections based on the colour it clicks on. The more a colour is prersent under the "radius" of the brush, the more photoshop will think it is the background colour, and erase it.

8You can now get nearer the edge, just remember that you want more of the colour to be erased, less of the protected colours, under the brush!

9Notice that to select the more fiddly edges, I am positioning the centre of the brush on top of the light blue, not the hair.

10These settings will remain true for similar areas, as soon as we get to areas with different colurs, for example the girl’s blouse, we need to select different colours to ‘protect’ - use the eyedropper to select the new foreground colour, right click to select a 51X51 pixel average.

11 You will need to change foreground and background colours often as you work through the image.

12Now open another image, perhaps an outdoor image like a beach or busy street.
Paste the selection of the girl above it, resize to fit and get rid of any stray white areas with a soft brush eraser.

13To tidy up any stray white edges around the hair, we will darken some parts of the imageSelect the Burn Tool

14From the Range dropdown options, select highlights and an exposure of 25% or thereabouts.

15Now go over the edges of the hair to darken (burn) any stray highlights or white halos on the edges.

16The finishing touches:
Image>adjustments>levels to increase tonal contrast on the background to match the girl image. This is a quick and dirty fix, As this tute is about the background eraser tool, not levels
Position the girl so her eyes are aligned with the horizon, to make the perspective credible.
You’re done!

A GREAT RESOURCE FOR ANYTHING WEB DESIGN

You can find SO many web sites here!! This is incredible!! Check out the free CMS at the bottom...

Click HERE

How to Create Gradient Website Background (y axis)

This tutorial will walk you thru the basic steps required to create a background gradient similar to the one used on this site (and contained in the Bex01 serendipity template). Once you have completed this tutorial you will understand the principals involved and can make your own variations.

********** STEP 1: CREATE OUR .PSD INTERFACE FILE **********
Create a new file 120 pixels wide and 5 pixels high. Put the Resolution at 72 pixels/inch.
Set the background color to White. Name it something appropriate ie: backgrad.psd.

********** STEP 2: CREATE OUR GRADIENT LAYER **********
In the layers palette double click on the text "Background" (not the thumbnail). This will generate a pop-up window which will allow you to rename the layer and it will simultaneously unlock the layer. For the sake of simplicity, I’ve left the layer name default to Layer 0. With Layer 0 selected, choose edit --> fill (Shift F5) and fill the layer with black. If you wish to create your own gradient, in this step fill your layer with the general background color you desire on your website.


********** STEP 3: CREATE OUR GRADIENT **********
At the bottom of the layers palette is the cursive F (contained in a circle) which enables you to apply layers styles to your layer. Click on this cursive F and from the drop down menu associated with it, select "Gradient Overlay".



With the layer Style window open, click directly on the Gradient that is represented. This will pop-up the gradient editor. Choose a gradient (usually the second choice from the top left) from the presets which represents Foreground to Transparent. This specific gradient is a part of the default gradients that ship with Photoshop. If you have messed around with your gradients previously and do not have this gradient available as an option, in the gradient editor click on the small right pointing arrow to the far right of the word "presets" and from the drop menu choose "Reset Gradient".

Once your Foreground to Transparent gradient preset is selected, it will appear in the window under the preset choice. The color represented in the gradient is derived from your existing choice of foreground/background colors. Since my foreground/background colors are white/black - I will see white moving into transparency. Look at the image below to get a good handle on this.



Now click on the far left stop that appears under the gradient in the gradient editor. We need to change this color. By clicking on it, the color swatch appears referenced under Stops (directly below it). Click on the color swatch in the color picker pop-up enter the following: #2b646b. Click OK to exit the Color Picker. Your gradient should now show that color fading to transparent. Leave everything the way it is and click OK to exist the Gradient Editor. In the layer style your gradient should appear in the gradient overlay. Check the box next to the word Reverse. This will flip the gradient. Now change the Angle to 0.

We want the gradient "flipped" because on our website, we want the light color extending for the box area that defines the content of the website out to the edge of the browser. In effect, we need our background color to get lighter as it approaches our site (which is centered on the page).

Click OK to exit the Gradient Overlay style.



********** STEP 4: DUPLICATE OUR GRADIENT LAYER **********
With Layer 0 selected, right click on it and choose duplicate layer. Call this new layer "grad right". Now with the grad right layer selected, from the layers palette window choose the cursive f at the bottom and select "Gradient Overlay". Deselect the check box next to reverse. Your gradient flips. Click OK.

You should now have two layer files, both with identical gradients except than in grad right the gradient is opposite to layer 0.


********** STEP 5: SET OUR FILE UP FOR THE WEB **********
Now here is where the fun starts. In the case of Bex01, I know that my website is centered in the browser. I know that the width of my website is fixed at 750px. The width of my graphic is 120 pixels. I want the gradient appearing on the left side and the right side. The formula is simply 120 + 120 + 750. So the minimum width of my graphic needs to be 990 pixels. However, I don’t want my background to repeat on a screen both on the x and y axis, so I’ll extend that width to 1000 pixels.

In Photoshop go to Image --> Canvas Size. Enter a width value of 1000 pixels and select the box so that the pixels will be added to the right side.




Select the Move Tool and then select the "grad right" layer. holding down the shift key drag that layer until it is positioned to the far right.

You will notice that the area in the middle is transparent. We need to fill that area with our teal green color. To do this, create a new layer (Shift Ctrl N on the PC | Shift Command N on the Mac) and fill it (Shift f5) with #2b646b. Drag this layer in the layers palette window to the bottom of the stack. Your layers palette should resemble the following.



You are now basically finished. Save your file as a .psd. Once you have it saved, choose "save as" and save it out as background.jpg or choose save for web and save a copy as .gif.

********** STEP 6: ADD THE CSS TO OUR WEB PAGE **********
On your webpage put the following html in your css. For your background color specify the general background color you choose in Step 2.



body {
margin:0 auto;
padding:0px 0px 0px 0px;
background:#000000 url(yourpicture.jpg) top center repeat-y;
}

How to Create a Background Layer

	This is a very basic, but yet extremely useful tutorial which will teach you how to an appealing background texture/pattern for your website. Start off by opening your Adobe Photoshop application. Then create a new Photoshop document. In order to create a new Photoshop document, you need to go to ‘File > New…’ *or simply by double-clicking anywhere on the empty workspace. Once you have done this, you should notice a ‘New’ dialog opening on the workspace. View Figure1 below as an illustration and reference to the values which you need to input into the prompting fields. Figure 1 Once you have filled in all the fields as shown in Figure1 above, you may press ‘Ok’ to continue with the creation of you new Photoshop document. This is a very small document which we are creating, but it will simply serve as a pattern for implementation on other designs. Press ‘Z’ to select the ‘Zoom Tool’. Now zoom in as much as possible. You will now select the ‘Pencil Tool’ from the ‘Toolbox’. View Figure2 below as an illustration to selecting the ‘Pencil Tool’. Figure 2 With the ‘Pencil Tool’ actively selected, you will now right-click anywhere on the stage of the new document to reveal the size preferences of the tool. Select the 1px size and click anywhere outside of the stage. Closely observe Figure3 below, for you need to clone the structure and effect as shown in Figure3 below. Simply click once with the ‘Pencil Tool’ on the corresponding positions to make a square dot. Figure 3 After you have achieved the same result as shown in Figure3 above, you are now ready to save the pattern for further implementation. If you are satisfied with the design, go to ‘Edit > Define Pattern…’ and notice a dialog opening on the workspace. This dialog will require you to type the appropriate name according to your personal preferences. View Figure4 below as an illustration to this step. Figure 4 We have now created a custom pattern, and thus we are ready to implement this pattern into our desired design. Create another new document. You can do this by going to ‘File > New…’ *or simply by double-clicking on the empty workspace. This will open up a ‘New’ dialog. View Figure5 below as a reference and exact illustration to the values which you need to enter into the prompting fields of this dialog. Figure 5 If you have filled in all the fields as shown in Figure5 above, you may press ‘Ok’ to continue creating the new document. Now move over to the ‘Layers’ panel. If the ‘Layers’ panel is not visible on your workspace, you can make it visible by going to ‘Window > Layers’ *or by pressing ‘F7’ as a keyboard shortcut. You will notice that there is one, empty layer named ‘Layer1’. We will now fill this layer with the pattern which we have saved previously. You can use the fill action by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When you do this, you will notice a dialog opening on the workspace. View Figure6 below as a reference to the values which you need to input. Figure 6 You will notice, as seen in Figure6 above, that I have chosen the pattern which we created earlier on. Once you have done this, you may press ‘Ok’ to fill this layer with the pattern. Now rename ‘Layer1’ as ‘texture’. You can rename the layer by double-clicking directly on the text/caption of the layer and then typing the new name at the insertion point. Now create a new layer in the ‘Layers’ panel. You can do this by going to ‘Layer > New > Layer…’ *or by pressing ‘Ctrl’ + ‘Shift’ + ‘N’ as a keyboard shortcut. You should notice a dialog opening on the workspace. View Figure7 below as a reference to the values which needs to be entered. Figure 7 We are almost done with this tutorial. There is one last step which needs to be completed. Move over to the ‘Layers’ panel. You will notice that the ‘background color’ layer is above the ‘texture’ layer in the ‘Layers’ panel. Simply click and drag the ‘background color’ layer below the ‘texture’ layer in the ‘Layers’ panel. Move over to the color box which is situated on the ‘Toolbox’. You will now change the primary/foreground color to the color which you would prefer to use. I have chosen to use #009CFF as my foreground/primary color. View Figure8 below as an illustration. Figure 8 Ensure that you have the ‘background color’ layer selected in the ‘Layers’ panel. Now fill the ‘background color’ layer with the foreground/primary color. This can be done by going to ‘Edit > Fill…’ *or by pressing ‘Shift’ + ‘F5’ as a keyboard shortcut. When the ‘Fill’ dialog opens up on the workspace, simply press ‘Ok’. We have completed this tutorial, and you may view the background texture which I have created in Figure9 below. You can use the same idea and effect to create different textures and effects. Figure 9 I have decided to transform the ‘background color’ layer to a gradient of two different color shades. You can play around with different effects, filters and other features. View Figure10 below as my final result. Figure 10 (Final Result) Thanks to Tutorialized.com for this tutorial!