Selasa, 05 Oktober 2010

Design a Jeans Textured Wallpaper to Create a New Year Representation..

Step119[1]
In this Photoshop tutorial, you will learn how to work with shapes, texture, and patterns to create this wallpaper.
Part of this tutorial uses Adobe Illustrator but a download is included in case you don’t have Illustrator.

Preview of Final Result


Step119

2010 Typographic Wallpaper Photoshop Tutorial


Step 1 - Create a new Document

Open Photoshop and create a new image (Ctrl+N or File > New) with the settings shown below.
  • Width: 1440
  • Height: 900
  • Resolution: 72
  • Background Contents: White
Step1

Step 2 - Creating Background

To create a striped background, press “D” to reset the color palette to black and white. Then create a new layer and fill the area in with white.
Next, filter the image (Menu > Filter > Sketch >Choose Halftone Pattern) with the settings shown below:
  • Size: 1
  • Contrast: 26
  • Pattern Type: Line
Step2

Step 3 - Removing lines

Choose the Magic Wand Tool (W) and click on any area that is white.
Step3
Then right click and choose Similar Option. This will now select all white areas.
Next, press “delete” to remove all the white lines.
Step4

Step 4 - Expanding the Lines

Expand the lines using the Transform tool (Ctrl + T) to fit your screen.
Step6

Step 5 - Rotating Lines

Rotate the lines to -45°. Duplicate the lines and place them next to each other, filling your canvas with lines.
Step5

Step 6 - Changing Color

Select the lines and lock transparent pixels from the layers palette. Then change the foreground color to the settings below:
  • R: 22
  • G: 22
  • B: 22
Step7

Step 7 - Adjusting Lines

Use the Free Transform tool (Ctrl+T or Edit > Free Transform) to rotate the lines -10°.
Step8

Step 8 - Adding Filter Effects

Add grains to the lines by locking the transparent pixels. Then use the Reticulation filter (Filter > Sketch > Reticulation) with the settings shown below:
  • Density: 14
  • Foreground Level: 40
  • Background Level: 18
Step10
Step11
Your image should now look like this:
Step12

Step 9 - Adding Blur

Smooth out your image with Gaussian Blur (Filter > Blur > Gaussian Blur) with a radius of 1 pixel:
Step13
Step14

Step 10 - Adding Levels

Brighten up the image by adjusting the levels (Menu > Image > Adjustments > Levels) to the settings shown below:
  • Input Levels: 16, 1.05, 130
  • Output Levels: 0, 255
Step15
Step16
Your image should now look like this:
Step17

Step 11 - Adding Spotlight

Adding spotlighting to the image helps create dimension. Select the Brush tool (B). Right click on your image and select the soft rounded 300px brush.
Step18
Then set your foreground color to white and click on the center of your image. Your image should now look like this:
Step19

Step 12 - Creating Pocket

The pocket is the next level of the image. Merge (Ctrl+E) all layers except for the layer with the spotlight. Choose the Pen tool (P) and create a shape like the pocket you see below. Right click on the path then choose Stroke Path. Select the Brush option in the popup.
Step20

Step 13 - Transforming

Copy (Ctrl+C) and paste (Ctrl+V) the image of the pocket you just drew. Then transform (Ctrl+T) the pocket. Invert the pocket colors by right clicking on the selection and selecting Flip Horizontal.
Step21

Step 14 - Adding Levels to Pocket

Brighten up the pocket image (Image > Adjustments > Levels or Ctrl+L) using the settings below:
  • Input Levels: 0, 0.67, 95
  • Output Levels: 0, 255
Step22

Step 15 - Adding Borders

Add borders to the pocket by using the Stroke (Menu > Edit > Stroke) option and the settings below:
  • Width 2
  • Location: Center
  • Mode: Normal
  • Opacity: 100%
Step23
Set the stroke color to #161616.
Step24

Step 16 - Transforming Border

Transform (Ctrl+T) the border and move it 2px inside the pocket image.
Step25

Step 17 - Duplicating Border

Duplicate (Ctrl+J) the border and name it “border2”. Move “border2” 6-7px inside the pocket image.
Step26

Step 18 - Transforming Inner Border

Use the transform (Ctrl+T) option on the inner border. Retract the upper top part of the border image by moving the top left and top right squares to the middle.
Step27
Your image should now look like this:
Step28

Step 19 - Duplicating the Pocket Image

Select the main pocket image. Duplicate (Ctrl+J) it and name it “patch”. Use the transform (Ctrl+T) tool option to reduce the size. Fit the reduced version of the pocket inside the second border.
Step29

Step 20 - Adding Levels to Patch

Select the patch and create another levels adjustment (Ctrl+L) using the settings below:
  • Input Levels: 0, 1.00, 213
  • Output Levels: 0, 255
Step30

Step 21 - Adding Blur to Patch Image

Select the patch and use Gaussian blur filter (Filter > Blur > Gaussian Blur) and the settings below:
  • Radius: 0.5 pixels
Step31
Your image should now look like this:
Step34

Step 22 - Adding Faded Effect

Select the Dodge tool (O) and right click on your image. Choose the soft rounded 300px brush.
Step35
Use your discretion and paint over the patch and some of the main pocket image.
Step36
Your image should now look like this:
Step37

Step 23 - Adding Design

If you have not downloaded extra brush tip designs, download the floral Photoshop brushes. Still using the Dodge tool (O), select floral brush design 1246.
Step38
Create a new layer and place the brush as you see in the image below:
Step39

Step 24 - Making Selection

Hold down the Ctrl key then click on the thumbnail of the layer with the floral design.
Step40
Hide the visibility of the layer with the floral design.
Step41

Step 25 - Adding Stroke

Create a new layer. Add strokes (Menu > Edit > Stroke) using the settings below:
  • Width: 1px
  • Color: white
  • Location: center
  • Mode: Normal
  • Opacity: 100%
Step42
Your image should now look like this:
Step43

Step 26 - Cropping the Design

Use the Pen tool to create a path that would crop out the design from the jeans. Press Ctrl+Enter to make the selection and then Delete.
Step45
Your image should now look like this:
Step46

Step 27 - Adding Design

Following steps 23 to 26; select the same floral brush tip and create a new layer again. Paint on your image. Rotate the brush to a different aspect of the floral design. Reduce the size of the floral design and move it to the opposite side of the pocket.
Step47
Your image should now look like this:
Step48

Step 28 - Creating the look of an open pocket

Select the Pen tool (P) and create a path like the one you see in the image below.
Step49
Then right click on the image and choose the 300px soft rounded brush.
Step50
Next, place the brush at the top left corner of the pocket. Click and drag the brush slowly to the bottom of the selection.
Step51
Your image should now look like this:
Step52

Download the 3D Text

The next steps require Adobe Illustrator. If you do not have Adobe Illustrator, you can download the file below and open it in Photoshop.
3D-Text.zip | 109 KB

Step 29 - 3D Text Design

Using Adobe Illustrator CS3, select the Text tool. Select a light gray color and a font that looks bold when condensed. Type your first letter on the screen. Then Extrude and Bevel (Effect > 3D > Extrude & Bevel) your letter with the following settings:
  • Position: Custom Rotation
  • Horizontal axis: -6º
  • Vertical axis: 35º
  • Depth axis: 0º
  • Perspective: 0º
  • Extrude Depth: 50pt
  • Cap: on
  • Bevel: none
  • Surface: Plastic Shading
3D1

Step 30 - 3D Text

Use this setting for every other letter in your text.
3D2

Step 31 - Placing Text in Photoshop

Copy the text from Illustrator and paste it onto your Photoshop image of the jeans.
Step53

Step 32 – Adding Highlights

Use the Dodge tool (O) and right click on the screen. Choose the soft rounded 200px brush. Select the text and place the Dodge tool where you see light gray on the text.
Step54

Step 33 – Adding Shadows

Use the Burn tool (O) and place the brush on the darker areas of the text.
Step55

Step 34 – Create a hanging effect

Select the part of the text you wish to hide in the pocket, making sure it aligns with the top of the pocket.
Step56
Delete the selection.
Step58

Step 35 - Creating Path

Use the Pen tool and create a path for one side of the text. Adjust the path so that it fits the corners of the text.
Step65

Step 36 - Filling the Path

Create a new layer with the path and select the image (Ctrl+Enter). Then change your foreground color to white and fill the space (Alt+delete). Hide the layer.
Step60

Step 37 – Adding stripes

Download the Stripes Photoshop Brushes then load them into Photoshop. Using the Dodge tool (O), select the striped brush design you want to use.
Step61
Create a new layer and create brush strokes along the areas you wish to cover.
Step62
Your image should now look like this:
Step63

Step 38 - Rotating lines

Select all the lines and merge them together. Rotate (Ctrl+T) until you see fit.
Step64

Step 39 - Placing Lines in side the Fill

Make a duplicate layer of the lines and hide it. Show the hidden white layer and select (Ctrl+Click) the layer.
Step67
Inverse (Ctrl+I) the selection and delete the lines.
Step68
Hide the white layer again.
Step69

Step 40 - Adding lines to the bottom surface of text

Use the Pen tool and select the area to add lines to. Copy and paste the selected area in the same place.
Step70

Step 41 - Placing Lines

Copy the layer of lines and hide the original again. Move the layer above the area of text you were working on. Group (Ctrl+Alt+G) the Lines layer inside the layer of text you pasted in the area. Rotate the lines so that they align in a three dimensional way.
Step71

Step 42 - Making Selection

Make another selection on another side of the text.
Step72

Step 43 – Adding lines to the side of the text

Follow the same methods of placing the lines in the selection as you did in steps 40-41.

Step73


Step74


Step75

Step 44 - Making Selection

Make a selection on a blank surface of the text.
Step76
Follow the same methods of placing the lines in the selection as you did in steps 40-41.
Step77

Step 46 - Adding lines behind the text

Make a selection on the underside of the text.
Step78
Follow the same methods of placing the lines in the selection as you did in steps 40-41.
Step79
Your image should now look like this:
Step80

Step 47 - Creating Path

Use the Pen tool and create a path along the area where the letter meets the pocket.
Step81
Right click and choose the 200px soft rounded brush.
Step82
Click and drag the brush slowly along the bottom of your selection until you get a feeling of depth.
Step83

Step 48 - Adding Shadow

Create a path that would reflect your text on the surface of the pocket.
Step84
Select (Ctrl+Enter) the area and fill the selection with black.
Step85
Blur (Menu > Filter > Blur >Gaussian Blur) the shadow with the following settings:
  • Radius: 7
Step86

Step 49 - Adding shadow another side of the text

Create a path along the area on the text that would not be exposed to light.
Step87
Select the area with the Pen tool and fill the area with black. Blur (Menu > Filter > Blur > Gaussian Blur) with the same settings as in step 48).
Step88

Step 50 – Placing text with the same angles on the screen

Place the letters you created with the same angle as the first letter on the screen.
Step90

Step 51 – Creating patterns

Follow steps 35-46 to create the same line patterns.
Step91

Step 52 – Cropping

Follow step 34 to create the hanging effect.
Step92
Step93

Step 53 – Creating shadows

Follow steps 47-48 to create shadows behind the text and by the pocket edge.
Step94
Step95

Step 54 – Placing the other text behind the pocket

Follow steps 32-46 to add lines to the letters you wish to put behind the pocket. Add a drop shadow to the text using the following settings:
  • Blend Mode: Multiply
  • Opacity: 75
  • Angle: 0, check “Use Global Light”
  • Distance: 7
  • Spread: 0
  • Size: 8
  • Contour: (see image below)
  • Noise: 0
Check “Layer Knows Out Drop Shadow”
Step96
Your image should now look like this:
Step97

Step 55 – Duplicating text

If your letters are different, follow the above steps to create the patterns and shadows to the rest of the text and move on to the next step. If your letters are the same continue on this step.
Step98
Group the entire layer for the letter you worked on in Step 54 and name it. Duplicate the group and place it outside of the pocket towards the right. Create a new layer behind the letter and create a shadow manually like the copy of the letter behind the main image. Fill the selected area with black and add blur to it.
Step99

Step 56 – Creating a thread effect

Use the Pen tool (P) and create a 90º line path.
Step100
Use the Brush tool and choose the 1 px tip. Use the Pen tool (P) again, right click and choose Stroke Path. When the Stroke Path window comes up, select Brush from the drop down menu.
Step101
Step102

Step 58 – Changing thread color

Change the Foreground color of the thread selection to #ABABAB.
Step105

Step 59 – Adding filter effects

Lock the transparent pixels. Apply the Reticulation filter (Filter > Sketch > Reticulation) with the following settings:
  • Density: 14
  • Foreground Level: 40
  • Background Level: 18
Step103

Step11[1]


Step 60 – Adding drop shadow

Add a drop shadow to the thread with the following settings:
  • Blend Mode: Multiply
  • Opacity: 75
  • Angle: 0, check “Use Global Light”
  • Distance: 5
  • Spread: 0
  • Size: 5
  • Contour: (see image below)
  • Noise: 0
Check “Layer Knocks Out Drop Shadow”
Step104

Step 61 – Creating a path

Use the Pen tool to create a path that resembles the thread wrapping under the letter.
Step107
Right click and choose Stroke Path. Select Brush from the drop down menu.
Step108

Step 62 – Erasing a part of the stroke

You now have two stroke lines on one side of the text. Use the Eraser tool to erase the stroke on the right side of the thread.
Step109

Step 63 – Adding the loose end to the thread

Create a path for the loose end of the thread.
Step110
Repeat the second part of step 61.
Step111

Step 64 – Adding color effects

Open the Color Picker for Foreground Color and set the color to #0582B0.
Step112
Use the Brush tool and move your brush around the screen randomly.
Step113
In the Layer Palette, select Color and change the opacity to 20%. Your image should now look like this:
Step114

Step 65 – Changing text color to red

Select the text and lines layers (omit the shadow layer) for your first letter and merge them. Repeat for the rest of the text. Select the first letter and change the Saturation (Ctrl+U) to the following setting:
  • Hue: 0
  • Saturation: 40
  • Lightness: 0
Step115

Step 66 – Changing text color to yellow

Select the second letter and change the Hue and Saturation (Ctrl+U) to the following setting:
  • Hue: 31
  • Saturation: 31
  • Lightness: 0
Step116

Step 67 – Changing text color to purple

Select the third letter and change the Hue and Saturation (Ctrl+U) to the following setting:
  • Hue: 296
  • Saturation: 31
  • Lightness: 0
Step117

Step 68 – Changing text color to blue

Select the fourth or last letter and change the Hue and Saturation (Ctrl+U) to the following setting:
  • Hue: 196
  • Saturation: 40
  • Lightness: 0
If you have more letters, feel free the change the Hue and Saturation (Ctrl+U) to whichever color you want.
Step118

Final Results


Step119[1]

Tidak ada komentar:

Posting Komentar