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.
✓ 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.
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."
✗ Click the Pen Tool or hit the keyboard shortcut letter (p) …
✗ … draw a rounded shape like a small hill and close it …
✗ … Right-Click the shape and hit Make Selection …
✗ … fill the Hill with a Gradient.
✗ Shrink your hill by hitting the keyboard shortcut: Cmd(⌘)+T and squeeze …
✗ … . and duplicate the hill by holding Alt (⌥)/Option and adjust them so they overlap.
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 …
✗ 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.
✗ Right-Click and hit "Make Selection"
✗ Fill the mountains with a brown gradient.
Step #7: Snow ~
✗ Paint some white lines with a soft brush near the peaks of the mountains …
✗ … get the Smudge Tool …
✗ … and spread the white around a little.
✗ Hit the keyboard shortcut: Cmd(⌘)+T and squeeze the mountains to make them more realistic.
Step #8: Blur the Mountains ~
✗ Go to: Filter > Blur and select 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.
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.