Summary:

Landscape Scene in Photoshop

    ●  Use the Brush Tool to make grass, the Pen Tool to make mountains and then insert it into your web page.


Learn About:

Pen Tool Convert Anchor Point Tool
Brush Dynamics

  •   This tutorial is part of the Run and Jump Game Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open a New Document in Photoshop ~

Open a New Document in Photoshop 1024x300 pixels …


Step #2: Photoshop Brush Tool~

Click the Brush Tool or hit the keybord shortcut letter (B) …

… hit F5 or click on the Toggle the Brushes panel button.


Step #3: Select a Grass Brush ~

You may need to Reset your brushes - Click the small arrow on the upper right of the box and select Reset Brushes …

… scroll down and find the brush that looks like Grass.

Then click Scattering and adjust the settings:


Step #4: Set your Colors ~

Now set your Foreground & Background Colors.

Try a light color green and a Background Color with a darker green …  

… but you can choose any colors you want, of course.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #5: Hills ~

Hit the keyboard shortcut: Cmd(⌘)+Shift+N to make a new layer and put it between the grass and the sky and call it "hills."

layer mountains

Click the Pen Tool or hit the keyboard shortcut letter (p) …

pen tool

… draw a rounded shape like a small hill and close it …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… Right-Click the shape and hit Make Selection …

new selection

… fill the Hill with a Gradient.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Shrink your hill by hitting the keyboard shortcut: Cmd(⌘)+T and squeeze …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… . and duplicate the hill by holding Alt (⌥)/Option and adjust them so they overlap.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #6: Mountains ~

Hit the keyboard shortcut: Cmd(⌘)+N to make a new layer and put it in front of sky by behind hills …

… select the Free Form Pen Tool …

… and make some mountain shapes with lots of points …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Be sure to close the shape by ending where you started with the Pen Tool …

Now select the Convert Anchor Point Tool

You can adjust the lines by holding the Cmd key while you move the ancho points.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Right-Click and hit "Make Selection"

make selection

Fill the mountains with a brown gradient.

fill mountains

 

Step #7: Snow ~

Paint some white lines with a soft brush near the peaks of the mountains …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… get the Smudge Tool

smudge tool

… and spread the white around a little.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hit the keyboard shortcut: Cmd(⌘)+T and squeeze the mountains to make them more realistic.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #8: Blur the Mountains ~

Go to: Filter > Blur and select Gaussian Blur …

gaussian blur

… blur the Mountains so they look farther away.


Step #9: Save as .png-24 ~

Then go to: File > Save for Web … and save the document as a transparent_bakgrnd.png-24 IN THE ROOT FOLDER OF THE PROJECT.


Step #10: Insert Backround ~

Insert the image in your html or body tags, whichever is available.

content div


Step #11: Postition Bottom ~

Set the Background Position to bottom:


Step #12: Repeat x ~

Set the Background Repeat X:


Last Step: Save and Upload your site ~

If you have a web server, save your pages, upload them and attach the link.

upload-site-dw.png