iD Tech Camps iD Tech Camps
REQUEST A BROCHURE



AMERICA'S #1 TECH CAMP

All posts by: Marta


Subscribe to the iD Blog

iD Blog Author: Marta

CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

July 19th, 2010 by Marta

Now that camp is in session all over the nation (and in Canada too!) in places like our California Film Classes or our Boston summer camps, I thought it would be nice to show you all how to create your very own autograph/memory book to take to camp or anywhere else you travel this summer and capture memories and autographs of old and new friends that you meet along the way.

SUPPLES YOU’LL NEED & WHAT YOU’LL CREATE
For those of you attending iD summer camp, I’ve created this tutorial so that almost everything you need can be found at camp. If you’re not attending iD this summer, most of the materials are easy and inexpensive to find at any craft store.

Here’s a rundown of the list of supplies that you’ll need to create this super-cool autograph/memory book:

  • Cardboard: Cut to the size of 8.5” wide x 5.5” tall
  • Colored Paper: 2 sheets cut to the size of about 8.5” wide x 11” tall to cover your book.
  • Colored Paper: 5 sheets cut to the size of 8.5” wide x 5.5” tall
  • Illustrator, Photoshop or Microsoft Word: To create your cover image and inside page designs
  • Scissors
  • Hole Punch
  • Glue
  • String (to tie the book together)
  • Green Tape (optional)
  • Mod Podge & paint brush (optional—and not found at camp.)

Remember, if you want to make one of these books at camp to always double check with your instructor before grabbing these supplies.  In fact, if you’re at home, I bet your parents would appreciate it if you asked too.

And here’s what your final project will look similar to:

autograph book final CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

CREATING THE COVER
For the cover of the autograph book, I simply found some old cardboard boxes that I didn’t need and cut them down to the size of 8.5” wide x 5.5” tall. Sometimes cardboard can be tricky to cut, so make sure that you’re extremely careful when you do this step (always cut away from your body) and that you ask for help from an adult if you need it.

01Cover CuttingCardboard CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

Next, you’ll want to use a hole punch to punch out three holes, which we’ll use later to tie the book together.

Now grab two sheets of colored or decorative paper that are at least 10” wide x 7” long. (Letter-sized paper works well for this). These two sheets will be our cover for our book. I bought some decorative paper from a craft store for my cover. If you’re at camp, the neon construction paper that your Camp Director has will work great as a cover. Or if you want, you can leave the cardboard uncovered…it’s up to you!

If you choose to cover your cardboard pieces you’ll want to print and cut out this template.

Download: Cover Template

Once you have this cutout, glue the paper to the cover of each piece of cardboard (don’t worry about covering your hole punches…you’ll be re-punching them later.)

Then turn the cardboard pieces over, fold over the tabs and glue them to that side of the cardboard.

01Cover GlueCover CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp01Cover GlueCover02 CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

Use your hole punch and and re-punch the holes that you punched before. Set your two cover pieces aside for now, as we’ll be coming back to them later.

CREATING THE INSIDE PAGES
The inside pages are simple to create. Take 5 pieces (or more if you want) of any type of construction or decorative paper and cut it to the size of 8.5” wide x 5.5” tall. Use a hole punch to punch holes in the same spots as you did for your two cover pieces.

Set these pages aside for later for when you assemble your book.

DESIGNING YOUR GRAPHICS
Now it’s time to power up that computer and start digitally designing! For these graphics, I used both Adobe Illustrator and Adobe Photoshop; you can even Microsoft Word to create your graphics.

First up is the cover artwork. In Photoshop I opened up a new print document (CMYK color mode at 300 dpi) with an artboard size of 5.5” wide x 4” tall.

Then I created a summertime cover graphic. You can choose anything for your graphic. If you need any help thinking of design ideas or styles, check out on some my previous posts on how to create a certain type of style.

After that, I added in a title for my book.

03Graphics CoverGraphics CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

After you’re satisfied with your cover design, print it out and glue it on the top cover of your book.

03Graphics CoverGlue CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

Next up, you’ll want to create your inside page graphics. This is where you can really let your creative freedom go, since you can choose any type of subject for the inside of your pages.

Using Adobe Illustrator, I created a new print document that was 8.5” wide x 11” tall.  Then I created two rectangles with 7”wide x 4” tall. After we print our artwork, these lines will help us know where to cut so that they fit on the colored paper that we prepped earlier.

03Graphics ArtboardSize CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

Then, I created designs on four of the boxes that included fun things that I could fill in about my summer and added in a title and a graphic on each page.

03Graphics InsidePages01 CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

The remaining four pages, I kept as autograph pages, so I anyone I meet can sign my book. Once again I added in a title and a graphic for each page.

03Graphics InsidePages02 CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

After I designed all my inside pages, I printed them out on a color printer and cut them out to size. Once each page was cut out, I glued one on each side of the paper that was prepped earlier and set them aside to dry.

03Graphics GluePages CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

OPTIONAL MOD-PODGE
This step is optional, but if you’re able, get a hold of some Mod Podge (found at any craft store). Mod Podge is a glue-like substance that will give a nice, glossy coat to your book. It will also make your cover water-proof and more durable.

You’ll need some sort of brush to apply the Mod Podge to your book covers and then just brush a thick coat on. When you apply it, it will look white and filmy. Not to worry, as it will dry clear.

05ModPodge Application CAMP DIY: Creating a Memory/Autograph Book to Take to Summer Camp

ASSEMBLING YOUR BOOK
Assembling your book is easy. Just take your two covers (if you used Mod Podge, be sure that they’re dry) and all of the pages that you created and put them in the order that you want them to appear in your book. Each of the holes that your punched should line up if you measured them out each time. Take three pieces of string and string them through the holes in your book and tie them in a tight knot (but just slightly loose enough so you can turn the pages).

CAN I GET YOUR AUTOGRAPH PLEASE?
Now that your book is ready to use, be sure to bring it along to all the places you go this summer. How cool would it be, if you attended one of our summer camps or teen gaming camps and were able to get every camper and instructor’s signature in your book? Very cool! If you manage to do that, be sure to let us know on our iD Tech Camps facebook page, because that is one tough feat…but one that I know any iD camper is capable of achieving!

Designing a Retro, Summer Postcard Using Photoshop

June 22nd, 2010 by Marta

Summer is in full swing here at iD Tech Camps, with many of our summer camps for teens and kids already in session. Since the next three months of your freedom will be most likely be filled with some sort of travel, what better way to keep connected to your friends and family by created your own set of postcards? Looks like it’s your lucky day, because in this post, that’s exactly what we’ll be doing.

WHAT YOU’LL LEARN & CREATE
In this tutorial, we’ll be creating a postcard that will be fully ready to print, either on your home computer or by using an online source (which can be really reasonable and allow your design to look extra professional). This is what your finished project will look similar to:

postcard final Designing a Retro, Summer Postcard Using Photoshop

Looks like it could be used if you were attending one of iD’s Rhode Island summer camps this summer!

The link below this paragraph will include all of the stock files that you’ll need to follow along. If you want, feel free to use your own files and just follow the technique instructions that I’ll give you along the way.

Tutorial Source Files (Approx 6 MB) : iDTechCamps_PostcardTutorialFiles.zip

SETTING UP YOUR ARTBOARD
Often times I want to find a professional, reasonable place to print my designs and Overnightprints.com is a great source for this. We’re actually going to be using their 4×6 postcard template to get started. This template will show you exactly where to place your artwork so that it prints correctly, should you decide to get your postcards professionally printed. If you decide to print at home, this template will allow you to do that as well.

To get to the file go to this this url: postcard template. Then click on the button that says, “Download Start File”, just below the red text that says 4”x6” Postcard.  You’ll want to save this to your computer, since you will be using this file to create your postcard.

settingup StartFile Designing a Retro, Summer Postcard Using Photoshop

When you open up this file, you’re going to see a folder in your layers panel that’s titled “delete these layers”.  On your artboard, you’ll have some additional directions for making sure your artwork stays within the printing boundaries and other printing information.  Keep this folder so you know where your design should go. You can delete it at the very end.

settingup specFolder Designing a Retro, Summer Postcard Using Photoshop

For now, you can hide this folder by clicking on the eye in the layer panel. We’ll need to reference this folder every so often, so you’ll end up hiding and displaying it with this click.

settingup hideFolder Designing a Retro, Summer Postcard Using Photoshop

CREATING THE BACKGROUND
The first design element we’re going to create is the background. While you may not be able to see it in the smaller thumbnail version in the beginning of this post, the background actually has a slight watercolor texture to it that really adds to that retro feel.

To lay a color base for the postcard background, draw a rectangle that covers the entire size of your artboard. Since we’re creating a print design, we’re working in CMYK at 300 dpi (not RGB at 72 dpi, which is for the web). The CMYK color code of this rectangle is: 10, 3, 45, 0.

background cmykColor Designing a Retro, Summer Postcard Using Photoshop

Now place the watercolor, texture background on top of this. To do this, go up to the top menu bar of Photoshop and click on File>Place.

background filePlace Designing a Retro, Summer Postcard Using Photoshop

Navigate to the folder that you downloaded at the beginning of this post that has all of the design elements in it (you’ll need to make sure that you’ve unzipped the zip file or it won’t let you open the folder.) Find the image that’s labeled, grungy_watercolor.jpg and select Place. Resize this image so that it covers up your entire artboard.

Once you’ve resized it, change the Blend Mode to Overlay.

background overlay Designing a Retro, Summer Postcard Using Photoshop

Instead of being bright purple and orange, your background’s colors should now be a lighter blue and yellow.

If you haven’t done so already, create a new group folder and name it, BG Elements. Place the two layers you just created into this folder. If you’ve read any of my other posts, you know I like to keep an organized layers panel, and folders are a great way to do so.

ADDING A GRUNGE BORDER
Next we’re going to add in a subtle white, grunge border. First, let’s create a folder called, White Grunge Border. The next two layers you create will go in here.

Create a new layer called, White Border. Then use the Magic Wand Tool (W) and click anywhere on the artboard. Go up to the top Photoshop menu and select Edit>Stroke.

border stroke Designing a Retro, Summer Postcard Using Photoshop

Change your menu settings to be the following:

border strokeSpecs Designing a Retro, Summer Postcard Using Photoshop

This will create a thick white border around your postcard. Now, we want to add just a bit of an uneven grunge border. To do this, we need to use one of the brush sets in that was provided in the beginning of the tutorial. To load a new set of brushes, select your Brush Tool (B) from the Tools Panel.

border brushTool Designing a Retro, Summer Postcard Using Photoshop

Then go the Brush Preset Menu just below the top Photoshop Menu. Select the Down Arrow, then select the circle button with the arrow pointing to the right. A new menu will pop up allowing you to select the option that says, “Load Brushes…”.

border loadBrushes Designing a Retro, Summer Postcard Using Photoshop

Navigate to the folder that you downloaded earlier in the tutorial and select asunder20 brushes file and click, Load. When you look at the brushes in your Brush Preset Menu, there should be a whole new set of brushes available to use.

border newBrushes Designing a Retro, Summer Postcard Using Photoshop

Create a new layer above the White Border Layer and name it Grunge Border. With the color white selected, use these brushes to create a subtle grunge border on the inside of the straight white border we created earlier. Experiment with different types of brushes in the set to create a random border effect.

border finalLook Designing a Retro, Summer Postcard Using Photoshop

CREATING RETRO-LOOKING TEXT
Now it’s on to the colorful, retro text. The font I used is called, Road Movie and can be found on dafont.com if you search for it. If you want to use a different font, by all means…go crazy and use whatever your creative mind desires.

To create the overlap look of the title, we’ll need to create each letter as a separate layer. So using your Text Tool (T) (located in the same area where the Paint Brush is located), click on your artboard and type in a letter “G” and make it about 65 pixels large. (Keep in mind that this may vary depending on which font you use.)

Change your letter “G” CMYK color code to be: 50, 100, 0, 0. This will give is a deep, fushia/purplish hue. Then change the Blend Mode to Darken.

text colorCode Designing a Retro, Summer Postcard Using Photoshop

Copy the “G” text layer you just created by hitting Ctrl + J. Using the Move Tool (V), move this copy to the right and change the letter to be an “R”. Keep the Blend Mode at Darken, but change the CMYK color code to be: 100, 0 , 0 , 0. Then adjust the placement of your letter “R” so that it’s overlapping the letter “G” just a bit.

text letterOverlap Designing a Retro, Summer Postcard Using Photoshop

Continue to do this until you’ve spelled out the word, “Greetings” using the CMYK color codes below.

text colorCodes Designing a Retro, Summer Postcard Using Photoshop

Now let’s add in the very subtle white drop shadow to the title text. An easy way to do this is to create a folder and name it, Title. Then put all of your letter layers into that folder. With the entire Title Folder selected drag it to the Create New Folder icon in your Layers Panel. This will create a copy of your Title Folder.

text copyFolder Designing a Retro, Summer Postcard Using Photoshop

Right click on the copy of your folder and select, “Merge Group”.  Now double click on the layer and change the Color Overlay to be white.

text colorOverlay Designing a Retro, Summer Postcard Using Photoshop

Now move your white Title Layer to be below your original Title Folder and place it so that it’s slightly to the above and to the right of the original text. Set the Opacity to be 80%.

Lastly, angle the entire title text and white drop shadow and place it towards the top left corner of your postcard.

text final Designing a Retro, Summer Postcard Using Photoshop

ADDING IN THE PAPER GRAPHIC
In the tutorial files zip folder that you downloaded, place the paper.psd graphic on your postcard artboard. Place it below your “Greetings” text and to the right a bit. Then use a script font and add in the word “from” in the top left corner of the paper graphic. Change the color of the font to be the orange that you used in the “Greetings” text. If you want to use the same font I used, you can go to dafont.com and search for “Honey Script”.

If you want, you can fill in the paper area with the place you’re going, but I thought it might be fun to keep it blank so that you can print out a bunch of copies and write in with permanent marker the place where you’re at when you decide to write to someone. Or you can always write your name in there too. It’s completely up to you.

CREATING THE LIGHTHOUSE GRAPHIC USING THE THRESHOLD FEATURE
We’re almost done with our graphics for the postcard! The next thing you need to do is open up the file called, “lighthouse.jpg” from the tutorial files folder that you downloaded. Once you have it open, duplicate the locked Background Layer by selecting it and clicking Ctrl + J, then delete the locked Background Layer so that you only have your copy in your layers panel.

Next go up to the top, main Photoshop menu and select Image>Adjustments >Levels. Bump up the contrast of image by moving the middle slider to the right a bit.

threshold darken Designing a Retro, Summer Postcard Using Photoshop

Now to up the Image>Adjustments>Threshold. Move the slide so that your Threshold Level is at about 141.

threshold threshold Designing a Retro, Summer Postcard Using Photoshop

Now take the Magic Wand Tool (W) from the Tools Panel and select any area of the image that is white. Since we want to select everything that’s white, after you do this, go up to the top, main Photoshop Menu and go to Select>Similar.

threshold selectSimilar Designing a Retro, Summer Postcard Using Photoshop

This should select all of the areas in your image that are colored white. Now hit delete so all of the white disappears.

Now to change the color of the black areas, double-click on the layer so that the Layer Style Menu pops up. Select Color Overlay and make the color to be the CMYK color code: 100, 50,30,010.

threshold colorOverlay Designing a Retro, Summer Postcard Using Photoshop

Make sure that both your postcard file and the lighthouse image are open on your Photoshop screen. Then in the Layers Panel (not the artboard), click and hold on the lighthouse layer that you just created. Now, drag it over to the postcard file artboard (not the layers panel) that you were working on earlier. This layer should appear on your artboard now.

It’s probably too big for your artboard, so hit, Ctrl + T to transform the size. Resize the image so that fits your artboard.

threshold resize Designing a Retro, Summer Postcard Using Photoshop

Also, you’ll want to make sure that this layer is below all of your layers except the BG Elements Folder you created earlier. This way you won’t be covering anything up that you want to be seen on your postcard. Here’s how I’ve organized and named my all of my layers to I can easily move groups and know what I’m clickin on.

threshold organizing Designing a Retro, Summer Postcard Using Photoshop

GO FORTH & CREATE
For the back of the postcard, I’ve included a Photoshop file in the downloadable folder that includes a postcard back. You can use this file if you want, or create your own.

If you’re looking to print your postcards, you can easily print them on your home printer, two to a sheet. Or you can go to OvernightPrints or UPrinting and upload your design files and they can print out as many as 25 or more. It’s reasonable and makes your postcard look like one that you would buy in a souvenir shop.  (Keep in mind iD is in no way affiliated with any printing companies. These are just some that I’ve used in the past.)

That’s it. You’ve now created a retro-looking postcard design for all your travels this summer. Now that you know how to add these elements into your design, you can modify your postcard to include a different image that conveys where you’ll be in the coming months. For example, let’s say you went to a summer camp in Colorado, instead of a lighthouse image you could include an image of the Rocky Mountains.

Tell us where you’re traveling this summer by posting your destination and activities on the iD Facebook page.

Here’s hoping you have a safe, happy and FUN summer. And remember…don’t forget to write!  (You can be sure that if you do send us mail, we here at the main office will personally write you back too! For our mailing address go here.)


Creating a Computer Wallpaper with Textures & Depth in Photoshop

May 13th, 2010 by Marta

Each year since I’ve worked at the iD headquarters, I get the privilege of creating the camp desktop wallpapers for iD Tech Camps, the iD Gaming Academy, the iD Visual Arts Academy and the iD Programming Academy, which you can see if you attend any of our programs this summer since they’re installed on every computer that’s used at camp. I can honestly say that this project is one of my favorite projects every year and it often inspires me to create my own wallpapers in my free time, which is what I’ll be showing you how to do in this post.

WHAT YOU’LL LEARN & CREATE

This tutorial will incorporate design elements such as adding textures, gradients, layer properties and using the mask feature in Photoshop. These are all basic to intermediate skills  and should be fairly easy to grasp. If you want to explore the possibilities that all of the Adobe products have, check out our Web & Graphic Design Courses or our Video Editing & Photography Courses that we have at our Day Camps and Overnight Summer Camps at iD.

The final project that you’ll have at the end of this tutorial will look something like this:

WallpaperArtwork Creating a Computer Wallpaper with Textures & Depth in Photoshop

Are you excited? It’s another Mario Bros. graphic. If you can’t tell by now, I really like Super Mario Bros (I mean seriously, have you played the New Super Mario Bros on DS? I’m totally addicted.). Not only that, I find that there are a lot of free resources out there for Mario graphics. Did you know that if you attend camp, you can actually make a replica of a Mario game in our Video Game Creation Course? Pretty cool stuff.

GATHERING RESOURCES

When I work on professional projects for iD or freelance projects at home, I sometimes need to purchase certain graphics due to copyright issues. For projects that I am creating for only myself or that I won’t be re-selling, I always look for free resources, because who doesn’t love free stuff?

This project requires a few resources—a couple of fonts, some high-resolution textures and an AI (Adobe Illustrator) file I pre-made. You can download the fonts and textures to a file on your computer here:

You can also find your own textures by doing a quick web search. Always remember to be careful about what sites you download content from, and if the computer you’re working on isn’t yours, it’s best to ask the person who owns it if it’s okay to download a file. Below are some good starting points for free, (safe) design resources on the web.

FONTS

VECTORS, GRAPHICS & TEXTURES

Another way of getting textures for your projects is to take your point and shoot camera and capture close-up photos of things around you. You’ll be amazed at what you can get from doing this.

GETTING STARTED

To get started, you’ll need to first figure out the size of the desktop wallpaper to create so that it will look good on your screen. To do this, you need to find out the resolution that your monitor is set at and set your image size in Photoshop to be those dimensions.

You may already know your screen dimensions, but if not it’s easy to find out. Click on the Start Menu on your PC computer, choose Control Panel. Once you’re in the Control Panel, go to Display and then click on the Settings Tab.

GettingStarted ControlPanel ScreenResolution1 Creating a Computer Wallpaper with Textures & Depth in Photoshop

As you can see on the image above, my screen resolution is 1280×1024, so when I create my new file in Photoshop my art board dimensions will be 1280 pixels wide x 1024 pixels high. Since this will be used for the computer screen, the image resolution will stay at 72 pixels/inch and the color mode, RGB.

GettingStarted newFile Creating a Computer Wallpaper with Textures & Depth in Photoshop

CREATING THE BACKGROUND

To create the background, use the rectangle tool to create a shape that extends over your artboard. Name the new layer you created, “Blue BG Gradient”.

CreatingTheBG NameLayer1 Creating a Computer Wallpaper with Textures & Depth in Photoshop

Open up your Layers Style Menu by double clicking on the layer (but not on the text, or you will be given the option to rename your layer.)

CreatingTheBG LayerStyle Creating a Computer Wallpaper with Textures & Depth in Photoshop

Now, click on Gradient Overlay and create a blue, radial gradient with these settings:

CreatingTheBG BlueGradient Creating a Computer Wallpaper with Textures & Depth in Photoshop

Now we need to add some texture to our background. Select File>Place at the top of your Photoshop screen, then navigate to the folder where you saved the texture files you downloaded at the beginning of this tutorial. Find the rust.jpg file and click on the Place Button to bring it into your PSD file.

You should have a transform box around your image, which allows you to resize the image. Resize the image to fill up your entire artboard and then hit Return to set the image into place.

CreatingTheBG RustTexture Creating a Computer Wallpaper with Textures & Depth in Photoshop

(By the way: When you place an image, it automatically becomes a Smart Object in Photoshop. Smart Objects can be useful because they allow you to resize and manipulate images without losing their original quality. You can tell when something is a Smart Object when it has a little icon in the lower right corner of its layer.)

Now that your rust texture is placed, we want to de-saturate it. First we need to rasterize our rust image by right clicking on the layer and selecting Rasterize. You’ll know that it’s rasterized if the icon at the corner disappears.

CreatingTheBG RasterizeLayer Creating a Computer Wallpaper with Textures & Depth in Photoshop

Next go to Image>Adjustments>Hue/Saturation and change the Saturation to -100.

CreatingTheBG HueSaturation Creating a Computer Wallpaper with Textures & Depth in Photoshop

To create the light texture feel, change your Layer Property to Soft Light and the Opacity to 40%.

CreatingTheBG SoftLightOpacity Creating a Computer Wallpaper with Textures & Depth in Photoshop

Now we’re going to create the yellow background element by creating a yellow-orange rectangle. Name this layer, Gold Brick and double click on it so that you open up its Layer Style. Change your Drop Shadow settings to be a dark blue (#043875), with a Blend Mode of Multiply. Change the angle to be 124 and uncheck the “Use Global Light” box. Make the distance, 29, the Spread, 0 and the Size 0.

Also, you’ll want to add a Stroke, which will be white and size 13. You can keep the rest of the settings at their defaults.

Now it’s time to bring in the second texture. Go to File>Place and find the file where you saved the brick.jpg. Expand this image to be at least the width of your gold shape. Then change the Layer Property to Overlay.

We want the brick texture to only be placed in the gold area, so we’re going to use a Clipping Mask to accomplish this. First make sure that your brick image layer and your gold shape layer are on top of one another in the layers panel. Then, to create a Mask, hold the ALT key and move your mouse in between your brick layer and the gold layer until you mouse changes from a hand icon to a double circle icon.

CreatingTheBG ClippingMask Creating a Computer Wallpaper with Textures & Depth in Photoshop

After you do this, your brick texture should only be seen within the yellow shape area. Nice!

The last thing we need to finish out background is to place the starburst graphic. From the files you saved earlier, place the starburst.ai into your Photoshop file. Resize it to fill up most of your artboard and center it on top of the yellow brick image. Lastly, change its Layer Property to be Soft Light.

To make things easier as we progress through the project, create a new folder and name it “Background Elements”. Now place all of the layers you just created in that folder by selecting them all at the same time (hold Shift to do so) and using your mouse to drag them on top of the folder.

CreatingTheBG NewFolder Creating a Computer Wallpaper with Textures & Depth in Photoshop

BRINGING IN & COLORING MARIO

Now we get to add in the Mario character. If you haven’t done so, download and install the fonts that from the beginning of the tutorial. The Mario and Luigi font is a type of font called dingbats, which means that each character of the font isn’t a letter, but an image. (If you want to learn more about fonts, check out Looking at Typography.)

The Mario graphic we need is found by typing in the lowercase letter, “q”. The default size of your font is probably pretty small, so change the size to be about 385pt.

Now since Mario is black and white, we’re going to color him in to give him a little depth. Coloring Mario is fast and fun. Basically what we’re going to do is use our Paint Tool to paint underneath Mario. To do this we need to create separate layers for each part of him.

First create a new layer by clicking on the New Layer icon in your Layers Panel. Make sure that this layer is underneath your Mario dingbats layer, which is named “q” since it’s actually a text layer. Name your new layer “Shoes”.

Mario Shoes Creating a Computer Wallpaper with Textures & Depth in Photoshop

Pick a dark brown color (I used #844100) and use the Paint Brush Tool to paint in Mario’s shoes.

Mario PaintShoes Creating a Computer Wallpaper with Textures & Depth in Photoshop

After this, you’re going to create six more paint layers, named, “Gloves”, “Shirt”, “Shirt Buttons”, “Face”, “Eyes” and “Hat”. In each layer, choose a color and paint the area in. I’ve included the color codes that I used in case you want to follow what I did.

Mario PaintNumbers Creating a Computer Wallpaper with Textures & Depth in Photoshop

When you’re done painting Mario, create a new folder and name it “Mario Character”.

ADDING IN THE TITLE TEXT

To add the title text, you’ll want to use your Text Tool and select the font you downloaded called, “Super Mario Bros.” Then type in the title that you want your desktop wallpaper to say. You can use the text I wrote or you can type in a new phrase if you like.

When you type your text make sure your font is black. Because of how this font is designed, when you type your text, the letters should be outlined in black and not filled in.

Next angle your text to the left to get that action feel. So far, your text should look like this:

Text Angle Creating a Computer Wallpaper with Textures & Depth in Photoshop

Since this font isn’t colored in by default we need to do so ourselves. To do this, make sure you have your text layer selected, then select the Magic Wand Tool (W) on your Tool Panel.

Then click anywhere on your artboard, except for inside the text letters. You should see flashing dotted lines around what the magic wand selected, which should be everything except for the text. Now, while holding the Shift Key (if you do this correctly your cursor will change into a wand with a plus sign) , select the areas of the letter’s O, R and A.

Text MagicWand02 Creating a Computer Wallpaper with Textures & Depth in Photoshop

With all of those areas selected, hit, SHIFT + CTRL + I. You should now have only your letters selected. Now go to your layers panel and create a New Layer. Then go to the menu at the top of the Photoshop screen and select Edit>Fill. From this menu choose “Color” and select the color white, or any color you think might go well inside the letters. After you fill in your letters, your text will still be selected. You can unselect the text by going to the Marque tool and clicking anywhere on your artboard.

Text FillColor Creating a Computer Wallpaper with Textures & Depth in Photoshop

Make sure to rename your new fill layer to something such as, “Text Fill”, then drag it below your original text layer so that the black outlines show up. To add the hard, drop shadow on the letters, make a copy of your “Text Fill” layer, then open up its Layer Style by double clicking on it.

Check the Color Overlay box and change your settings to the ones below:

Text DropShadow Creating a Computer Wallpaper with Textures & Depth in Photoshop

Name this layer “Text Drop Shadow” and move it below your “Text Fill” layer. Use your mouse to adjust it a bit to the left and a bit below the original text. It now gives the illusion of a drop shadow.

Text DropShadowMove Creating a Computer Wallpaper with Textures & Depth in Photoshop

After that your wallpaper is complete! Looks pretty snazzy, huh? Now that you know the basics for using textures and Clipping Masks, you can add in other elements to make your wallpaper uniquely your own. For mine, I decided to add some other Mario characters using the same dingbats font and the same coloring method I used for Mario. I also added in our iD logo for fun.

Wallpaper finals Creating a Computer Wallpaper with Textures & Depth in Photoshop

The last thing you’ll need to do is so save your graphic as a jpg. You can create a small file by going to the top Photoshop Menu and selecting File>Save for Web & Devices and saving your graphic as a jpg. Then go to your computer’s Start Menu and go to Display (like you did at the beginning of the tutorial to find out your screen size). On the Destktop tab, click on the browse button and select the file you just saved. Hit OK and your very own wallpaper should be on your computer!

Now that you know how to create a personal desktop graphic, you can be sure that I’m going to ask you to send us any of your cool creations. As always feel free to send them to info@internalDrive.com or hit us up on facebook and show us what you’ve created. Happy designing!

5 Mini Design Exercises to Get the Creative Juices Flowing

April 13th, 2010 by Marta

With spring here, you may have no problem thinking of ideas for your next creative endeavor. After all, that overnight summer camp that you’ll be attending in a few months may have you overflowing with ideas on how you’ll create your own graphic design pieces, model a 3D character or make your own iPhone® games. On the other hand, maybe you’re so excited you don’t know where to begin. It’s times when you may feel a bit of creative block that doing some simple creative exercises can help get you loosen up, take your mind off the making the perfect project (because who are you kidding, in the end it will be) and allow your imagination to let loose.
The best part about each of these mini, right-brain exercises is that they only take about 15-20 minutes and don’t require the skills of Picasso. In fact, each one is designed to be done quickly and without reservation so that you can just be yourself and get creative. Plus in that short amount of time, you’ll have sharpened your skills, which will in turn help you out in future projects that you create.

MINI EXERCISE #1: Graphic Quotation
In this mini-exercise, first find a quote that you may have heard or that you like. Using just a sentence or two from the quote, design a graphic that conveys the feeling of your quote. You can use anything to design your graphic; paper, pens, markers, Photoshop, Illustrator. It’s entirely up to you.

Here’s the quote I choose:
“Hold fast to dreams, for if dreams die, life is a broken winged bird that cannot fly.” –Langston Hughes.

Then using my imagination, I went into Photoshop and created a graphic using some vector bird images, gradients and a bit of texture.

miniExercise sample011 5 Mini Design Exercises to Get the Creative Juices Flowing

MINI EXERCISE #2: Monster Doodles
This mini-exercise requires the company of at least two other friends. Together, the three (or more if you want) of you will be collaborating to create a monster. The trick is that you won’t see what each of you will draw until the very end.

First, fold three pieces of paper into three linear sections. On each folded section write a number 1, 2 or 3. Each person gets a piece of paper and starts to doodle a monster head on the top section. Get creative! It can have 20 eyes, three mouths, a Mario Bros. hat on, whatever you want to draw is perfectly fine.

After each person is done, pass the paper to another person in your group. Now everyone begins to draw a monster mid-section on the #2 panel of your piece of paper.

Once again, pass the paper around and then have everyone draw the legs and feet (or slime blob if your creature has no legs or feet). After everyone is done drawing, open up your papers and see the finished monster creation that you have drawn together with friends.

miniExercise sample02a 5 Mini Design Exercises to Get the Creative Juices Flowing

Here’s what three of my co-workers/friends at the iD office came up with today when we tried this exercise:
miniExercise sample02b 5 Mini Design Exercises to Get the Creative Juices Flowing

MINI EXERCISE #3: Photo Story
Grab some sort of camera that you have around. It can be something as simple as a phone camera or as high-tech as a Sony SLR that we use in our photography camps at iD. Now without thinking about it for very long (say 20 seconds) find something in the area that you’re in that will make a good photo story and take about 10 photos (try not to take too many more or you’ll be sifting through tons of photos to find that perfect one.) The key here is to do it quickly; otherwise you’ll get caught up in the details, which might hinder your creative “looseness”. Don’t worry about your subject being silly or odd. That’s the beauty of this exercise…you can take anything and make it into a mini-story.

If you have Photoshop or another photo organizing software, choose only 3-5 photos out of the 10 and arrange them to tell your story. Add any elements that you find will enhance your story, but if you can try to refrain from writing sentences or multiple words. You want the photos to tell the story. If you don’t have Photoshop, you can also print out your photos and add elements using markers, pens, crayons, buttons or anything else you have around the house.

For my photo story, I looked around at my desk and didn’t think I could make a story with anything. Then I saw some of the little figurines I have and took a few photos. I brought my images into Photoshop. Quickly arranged them into the order I wanted them to be, and then added some doodles and elements that I created right in Photoshop. This is what I came up with…pretty simple…but it got my right brain working.

miniExercise sample031 5 Mini Design Exercises to Get the Creative Juices Flowing


MINI EXERCISE #4: The Many Faces of Your Imagination
This exercise is pure fun. All you have to do grab a pencil, download the face template and begin drawing! The template has nine areas for you do draw different types of faces. Don’t concentrate too hard, just quickly draw nine different faces and see what you come up with. Sketching is always a great way to sharpen your creative skills. Who knows, maybe one of the faces you draw will be a starting point for a great,  3D animated character in the future.

Here’s the template to download:
Face Sketches Template

And to prove that you don’t need to be an professional designer to begin sketching, I grabbed the talents of Roque and from iD Client Services and this is what he came up with. Nice job Roque!
miniExercise sample04 5 Mini Design Exercises to Get the Creative Juices Flowing

MINI EXERCISE #5: Photo Thumbnail Collage
Pick any subject that comes to mind. Now scour the internet and find a good amount of images of photos that go together with the subject you picked. If you want, you can take a few photos yourself too. This mini-exercise is similar to the photo story that we did earlier, but it also differs because you’re not telling a linear story, so your photos don’t necessarily need to go in any certain order.

Since I grew up in Minnesota, and the Twins baseball team just had their opening ceremonies yesterday for the brand new Target Field. I’ve been thinking a lot about my home state. So the subject that I choose was the MN Twins. (By the way, you can check out the new field if you head on over to one of our Minnesota Summer Camps.)

For my collage, I found 6 images that directly depicted the MN Twins. Then I found 3 images that showcased the Twin Cities, and 3 images that were abstract baseball images. I arranged them together, added a graphic and my end result looked like this:

miniExercise sample05 5 Mini Design Exercises to Get the Creative Juices Flowing

One thing to note: It’s crucial to remember to credit any person or company that you grabbed the photos from on the internet.  Also, if a site specifically says not to use the photos on the page without their written permission, just don’t use it. Even though you’re creating this entirely for your personal purpose and not to re-sell or re-distribute anywhere else, you always want to make sure you’re honoring the desires of other creative individuals out there.

GREAT WORKOUT…LET’S DO IT AGAIN SOMETIME

Try all or just a few of these mini-creative exercises to flex the right side of your brain. The biggest thing to remember when doing these exercises it to not worry, do it quickly and see what you come up with. You don’t have to show anyone if you don’t like what you created, but I bet you’ll be surprised at what you can create when your don’t have any restrictions. And while you might not use any of the graphics you created in your projects you may find that what you’ve created will spark an idea that will help you down the road

So go out, do anything you can do be creative and know that you don’t always have to produce perfect work in all that you do or spend hours and hours of time on something…but you should always make sure you’re having fun! As always, feel free to submit any of your artwork to iD. In fact, if you like, check us out on facebook and post a photo there of any of your creations. We’d love to see what the iD world is showcasing!

A Letter from the President of iD Tech Camps

March 25th, 2010 by Marta

pete family02 A Letter from the President of iD Tech Camps

Dear iD Nation,

My name is Pete, and I am the president of iD Tech Camps. Summer camp is just around the corner—90 days and counting. Can you believe it? We’ve got a $50 savings which ends in 10 days—but I think it’s important to find a camp that is right for you. I send my own kids to some wonderful summer programs. I want well-balanced programs that deliver quality, safety and fun for my kids. And I don’t want to waste my money. How about you?

My sister and I have been at the helm of iD Tech Camps for 12 years. We’re an independent, family-operated company with a loyal following 100,000 students strong. But we’re the #1 tech camp in North America because we’ve built our business one student at a time. Our goal is to deliver an unforgettable technology experience. So, why do I think iD Tech Camps is so extraordinary? Here are 5 reasons. We call it the iD Difference.

  1. TECHNOLOGY IS DRIVING OUR ECONOMY FORWARD. Some of the best jobs of the future are, and will be, related to computer science, green tech, green energy, web and mobile apps, social media, game design and more. The development of these skills is no longer optional. It is essential. Our fun, challenging courses are developed using products from the best technology companies on the planet. Students immediately put these skills into action—at school, preparing for college and entering the job market. Courses are beginner through advanced.
  2. STRETCHING YOUR DOLLARS. Saving money is important. Here’s what we’re doing.
    • You save $50 when registering by April 4th. Seats are filling up.
    • We have not increased tuition on Day Camps this season.
    • Tuition for Overnight Camp has increased only modestly.
    • When you refer friends, you save $50 and your friend does too! The rewards have increased from $25 to $50 this season.
    • There are additional $50 savings for siblings and multi-week participants.
  3. PERSONALIZED INSTRUCTION, GUARANTEED RATIOS, ADULT-ONLY STAFF. We don’t cut corners. We average 6 students per instructor. Personalized instruction is the core of our business. We even guarantee our ratios, which is unheard of in the camp industry. If we ever exceed 8 students per instructor during instructional time at iD Tech Camps, your camper comes back for a free week of camp. Additionally, we only hire adult staff to teach and mentor—we do not have CITs (counselors in training) teach our courses. Our staff is trained in-person and all members must pass extensive background and reference checks.
  4. THE COLLEGIATE EXPERIENCE AT TOP CAMPUSES IN THE U.S. & CANADA. When I was a kid, I attended several camps on college campuses, and the experiences changed my life. Students at iD study, explore and play on campus, eat in the university dining halls and overnight students stay in real college dorms. And for teens looking to boost their portfolios, we offer accredited Continuing Education Units at all our locations. I’ve got a seat waiting for you at iD! Check location availability.
  5. LEARN ALL YEAR LONG. FOR FREE. Parents have asked us over the years, “Do you offer anything after summer?” In response, we began iD 365. We are confident no other summer camp offers this extra value. Here’s how it works:
    • When you register for summer camp, you automatically get access to our monthly online workshops taught by live instructors.
    • Students log on from home, learning awesome new technologies and getting their questions answered in real time.
    • The best part? iD 365 is free when you register for our summer camp!

Many of us at iD have kids and teens of camp age. We want the best for our kids, just like you want the best for yours. When you drive off and see your kids in the rear view mirror, we want you to feel confident in our camp staff. We set high expectations, and your family deserves that. If you enroll at just one summer camp in 2010, I hope you’ll consider our program.

If you have questions, please feel free to give us a call at 1-888-709-TECH (8324), option 1, or for international calls, 408-871-2227, option 1. I’ve personally witnessed how iD Tech Camps has changed the lives of so many students over the years. Students who knew nothing about technology are now doing amazing things. We hope to see you this summer!

Sincerely,

pete sig2 A Letter from the President of iD Tech Camps

Co-Owner and President