Wednesday, December 4, 2013

Graphic Design and Pixlr Magic!!!

In class we have been using Pixlr from a company called Autodesk.

In 7th Grade students need to select an artist and then design their maze game in the spirit of the artist.
Student are to use the images of the artist on these specific backdrops:
  • Name of game (intro)
  • Directions
  • Level One
  • Level Two
The student can use the Scratch paint editor to design their Win backdrop and Maze One.

Maze Two and its sprites will be hand designed in class.

How to use Pixlr to create these backdrops?

First go to Pixlr which will bring you to this page:
Next click on the PIXLR EDITOR icon on the left.

This will bring you to the next screen!










Here is the next screen that you will come to.

Depending on how proceed you will either open a saved image on your computer or open an image by its URL. 

Either way the process is the same. In this tutorial I will show how to edit an image you import by using its URL or web address.

To start open another tab and locate an image by the master artist of your choice. For my example I will use Richard Diebenkorn.
Caution! You will need to cite your images so that you are not at risk for plagiarism. You can do this by adding a Credits backdrop to your Scratch game.  

Here we go... I have located a picture using Google Images. When I click on the image I get two options one is to go the web site that contains the image and the other is to view the image by itself. You wish to view the image.

You can now copy the web address or URL (Universal resource locator) of the image. Simply right click and copy or press Ctrl+c.

Next in Pixlr you want to select the Open image by URL button.





You then paste the URL you just copied into this dialogue box:



Once imported you need to unlock the layer. Click on the lock icon in the layers palette (located on the right side of the screen).

You then need to set the canvas size. The stage in Scratch is 480 x 360 pixels. In Pixlr at the top there is a menu. Click on the Image text and you will be greeted with a drop down menu.

You wish to select the Canvas size... in the dialogue box that opens type in 480 for the width and 360 for the height.

You can now either click on the pointer tool and move the image around or go to the top menu again and select Edit > Free transform.  Free Transform will allow you to re-size the image to fit your canvas size. Holding the shift key while you drag the corners will keep the image from stretching out of shape or getting distorted.

Now lets add some text! To do this we need to use the Type tool which is the on the Tool palette.
Simpy type into the text box that opens up. You can control the font type, color, and size. In the layer palette on the right you can do more interesting effects to make your text pop.

You can further style your text by clicking on the layer styles button in the Layers palette. Shown on the right. It is the button with the star on it.

For some folks wishing to work with images that will be treated as sprites you will need to use the magic wand tool. Simply import your image into Pixlr and then unlock the layer. You can then use the magic wand tool to select the white area around the image. Once its selected press delete or backspace on the Chromebooks to delete the white selection which will now leave you with a transparent background.