common object example

Summary:

Game Background in Photoshop

    ●   Make a Background in Photoshop that Looks Mysterious

    ●  Layer Masking can be a difficult concept to understand, but every program uses them and Photoshop is a good place to begin teaching it.

Learn About:

Blending Mode Layer Mask Gradients Brushes Text

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

Other People's Work:

Here are examples of work inspired by this tutorial.

     

Step #1: Open a Blank Document in Adobe Photoshop ~

Open PhotoShop & create a new canvas. Hit the keyboard shortcut: Cmd(⌘)+N or go to: File > New


Open a new document 1200 X 1000 pixels, the approximate size of the background for your website.

1024 x 768


Step #2: Pick your Colors ~

Double-Click your colors …

… and set the color to whatever you want.

Set the other color too to another color that matches, just change them both …


Step #3: Gradient Fill ~

Select the Gradient Tool which is behind the Paint Bucket

… click Radial Gradient on the menu bar …

radial gradient

… then click the Gradient Picker arrow and select the Foreground to Background gradient.


Step #4: Drag a Gradient ~

Drag the gradient tool across the canvas and position the glow shining down from the top.


Step #5: Find Some Clouds ~

Find a picture of some Mammatus clouds and copy them …

clouds

… paste the clouds you copied …

… and adjust their position using the keyboard shortcut: Cmd(⌘)+T


Step #6: Blending Modes ~

Scroll through the Blending Modes and find one you like …

 

 

 

 

 

 

Try Multiply, Screen or Overlay or whatever you like best …

 

If you see other blending modes you like as you're scrolling down, don't be afraid to experiment.

 

Blending Modes are awesome!

Hint: You can scroll through the different Blending Modes by hitting Alt (⌥)+Shift+Plus:


Step #7: Layer Mask Effects ~

Click Add layer mask at the bottom of the Layers Palette …

… then click the Layer Mask Thumbnail

… and select the Gradient Tool again.

Drag the Gradient Tool across the image until you get a nice blend:

Try it!


Step #8: Images ~

Find a picture of a Skyline, Mountains, Castles, Waterfalls, Yosemite, Aztec Pyramids, Trees, Moons, Planets, whatever looks cool and mysterious or whatever you need …

… copy and paste the image.

paste


Step #9: Layer Mask Again ~

With the Castle layer selected, click on Add Layer Mask

… make sure the Layer mask thumbnail is selected …

… get the Gradient Tool again (G) …

… but this time, hi the letter 'd' on the keyboard or click the default icon to reset the default colors to Black & White on the Color Palette …

Radial Gradient (or Gradient Scheme you want) …

… and drag the Gradient Tool over the image.

Experiment with the different gradient styles!


Step #10: Find a Font that Matches your Project ~

Go to http://www.dafont.com/ and search for a font that fits your project theme -

  •   For instance, if you want a text or font that looks Old, search for that at dafont.com.

OR

  •   If you want something that looks like Money, search for that. Get it?


Step #11: Download the Font ~

When you find a font that matches your project, Right-Click and save the file to your desktop, or somewhere you can find it …


Step #12: Open Font Book ~

Go to where you downloaded the font, open it, and double-click on the .tff file(s) …

… when Font Book opens, click Install Font.


Step #13: Type Some Text ~

With the Text Tool, type your text: the name of your site, your Movie Title or Tag Line, whatever you can use in your project.

magic

… click on Font Family in the menu bar and scroll through the different fonts.


Step #14: Layer Styles ~

Lastly, click on Add a layer style

… and apply the Blending Options you want.

 

 

 

 

Blending Options are very powerful.

 

 

 

 

Live them! Learn them! Love them …

Step #15: Stars ~

Create a New Layer.

new layer

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

… click the Brush Preset Picker in the Menu Bar …

Click on the little image and click on

… and hit Append.

image

Find a brush that looks like a star shape:

image

 

 

 

 

 

 

Suggest using: Crosshatch Brush or Starburst Brush

Also, paint some stars on the new layer in white.

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

Get Adobe Flash player


Step #16: Save for Web ~

Go to: File > Save for Web … and save your document as a png-24 and save it in the root folder for this project.


Step #17: Use the image IN YOUR PROJECT ~

REMEMBER: This assignment will not be accepted unless it is published

IN YOUR PROJECT.


Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the HTML tag:


Step #18: Background Image Properties ~

Select Background and attach the image …

… set Background-repeat to no-repeat

… set Background-attachment to fixed

… set Background-position (X) to center

… and set Background-position (Y) to top or center.


Step #19: Background Cover ~

Open your CSS styles panel …

… and double-click your styles.css file to open it.

open-styles-sheet.png


Step #20: Scroll Down ~

Find your HTML code:


Step #21: Insert the CSS ~

Copy this code …

		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;

… and paste it so it looks something like this:


Last Step: Save and Upload your Work ~

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

upload-site-dw.png