iD Blog Author: Marta
February 14th, 2011 by: Marta
Happy Valentine’s Day to everyone! Besides being able to eat all the candy and chocolate you want with no excuses, there’s no reason to not have a little fun on this holiday. After all, it does break up those winter months a bit doesn’t it and helps the countdown to taking C++ Programming courses or Web Design courses go just a bit faster. (We here at the iD office can’t wait either.)
On this day of pink and red, I’ve taken the liberty of finding some fun resources to enjoy. Desktop wallpapers, corny jokes and Valentine’s Bingo, to name a few. Here’s hoping you have a great day. Eat lots of candy and if you can, tell at least one person that you appreciate them.
VALENTINE’S DAY WALLPAPER
This guy is one talented web designer and illustrator. Not only does he have a nice selection of Valentine’s computer desktop wallpapers, he also has a big selection of free, everyday desktop wallpapers that are pretty unique and subtly humorous. He even has some great tutorials on how he creates his wallpapers with such rich textures. I often check his site to see what new wallpapers he’s designed and I’m always impressed with his illustrative talent.
Vlad Studio: Valentine’s Day Wallpaper
VALENTINE’S DAY BINGO
When was the last time you played a game of Bingo? Bring out the gamer in you and print out these free, customizable Bingo cards from DLTK Crafts for Kids. All you have to do is follow the directions and the site makes your bingo cards for you, complete with a bingo call out sheet too. Go all out and challenge your friends, your co-workers, your family. And don’t forget to play with a bunch of cards at one time…that’s how serious Bingo players do it.
Printable Bingo Cards
VALENTINE’S DAY JOKES
Ready for some knee-slappin’ holiday jokes? Print out this PDF from Family Fun and make someone laugh (or roll their eyes) by cutting out one of the jokes and giving it to them. Humor your parents by sticking it in their briefcase for work, or make your child smile by sticking it in their lunch box. They may be corny, but everyone can use a little light, fun humor from time to time. I mean seriously, don’t you want to know what the baseball bat said to the homerun ball?
Cheesy Jokes PDF Printout
VALENTINE’S DAY PRINTABLE CARDS
Still not convinced to have a little fun this heart day? Okay, not a problem. Then head over to mmmcrafts and print out this funny valentine card that keeps it cool and gets straight to the point. If you don’t like chocolate…please, feel free to send some over to the iD office. I’ll gladly take those treats off your hands.
Easy Valentine’s Day Card Printout
And…if you’re looking for a little bit of a video game flare to your valentine’s card this year, don’t forget this post from last year. You can print out the template and make your very own Super Mario Brother’s pop-up card. Fun stuff.
DIY: Pop Up Valentine
CUPID FLASH GAME FROM ORISINAL
Last but not least, for all you video game designers and Flash game enthusiastic out there, here’s a fun little Flash game where you have to shoot cupid’s arrow at floating hearts.
Cupid’s Arrow Game by Orisinal
If you’ve never been to Orsinal’s website, and you like Flash games with well-designed graphics, you’re in for a treat. Orisinal has a good selection of mini-flash games that range from really easy to somewhat difficult. But I would say the most enjoyable thing about checking out this site is how well each Flash game is artistically executed. All of the graphics are amazing and it’s fun to play all the games just to check out the illustrations within them. Some of my favorite’s would have to be Milk the Cow, These Little Pigs and Bumble Bees (the easy ones of course).
All Flash Games by Orisinal
HAVE A LITTLE FUN
Anyone else have some fun February 14th crafts or activities that you do with your family and friends? Parents, what do you do to let your kids know that you think they’re special on Valentine’s Day? Leave a comment on this post and let us know. We love to hear your ideas!
P.S. While we’re on the subject of love, why not tell us why YOU love iD Tech Camps? Were you a camper? A staff member? A parent? Tell us what makes your tech heart beat for iD!
February 14th, 2011
Posted in: iD Tech Bloggers
January 24th, 2011 by: Marta
I’ve been working as iD’s Lead Designer for four and half years now and I, along with many of my co-workers, can tell you that running summer programs for teens and kids is a tough, but fun job. And that combination of hard work and fun sure makes time speed by. (Did you know our CEO plays golf on the desks at work?) Ever feel like time flies by when you’re having fun? I sure do.
HALF A DECADE
While there are times that it still “feels like yesterday” that I went to college, I have to realize that there’s been quite a few years from the time I put on my graduation honor chords and walked to the tune of Pomp and Circumstance. In keeping with the theme of this blog post’s title I have to admit it’s actually been five years since that milestone. I know–crazy. Five years! There’s a lot people can do in that time span. Seriously, you could attend quite a few iD courses; maybe even attend different locations. You could even attend iD as a camper for a few years, graduate from high school and then work at one of our summer camps and experience of the best summer jobs you’ll ever have in your life. (Trust me, I’ve worked out at camp and it’s also hard work, but pure fun.)
Yup, five years is no short amount of time, but that’s not necessarily a bad thing. While I know I still have much to learn and can’t consider myself an expert yet in the field of design, I do know that my years of professional design experience doesn’t make me a newbie anymore either.
COLLEGE + REAL-WORLD EXPERIENCE = MAD SKILLS!
What has being out in the real working world taught me? So much. But it’s also safe to say that my college education was pivotal in fine-tuning my design knowledge and skills so I could go out and get a career that I love. So with all my “worldly wisdom”, I give to you five things I did learn in college and five things I learned while out on the job.
5 THINGS THAT DESIGN SCHOOL TAUGHT ME
- Critiques happen in real life. It’s called pleasing your boss or client. Some of the toughest critics out there are design professors. Most are nice, but let’s face it; design profs are there to make you a better designer. Often the tough ones are the ones that will prepare you for when your boss or client tells you that they don’t love the design yet. At iD, everyone is pretty nice, so if I design something that isn’t what someone had in mind, they always want to let me down gently. And my response to that? I always tell them that I’ve already had the toughest critics out there, what they say won’t offend me. Those nerve-wracking critiques in design school really were worth it.
- You need a solid design process. In design school, I took multiple courses with a professor who made sure that we always followed a strict design process. One of our deadlines would actually be to create our timeline of when we would accomplish things. I never enjoyed this process because often I would want to just jump in and begin designing. While I didn’t know it then, he’s the one who is responsible for my design process now. My process usually goes something like this: Research, Sketches, Photoshop or Illustrator Comps, Final Comps & Edits, Clean-Up Files, Submit Files. Following a design process is something that you will find at every professional design studio. It’s what helps makes projects exceptional.
- Sometimes you need to pull an all-nighter (or at least long hours) to make an outstanding piece. Before college, when I thought of all-nighters, I imagined it was something that ended after you graduate. Not always. Especially in the design field, there are times when a project needs to be completed in a short amount of time, but done just as well as if you had a lot of time. That’s when long-hours come into play. Some of the pieces that I’ve spent long hours on are some of my favorite and rewarding pieces. Take the iD catalog…did you know this year we managed to design the catalog in about a month? A lot of hard work from a lot of people here in the company, and I was able to be a part of that experience.
- A professional portfolio is a necessity. I can’t remember how many times we got this assignment in design school. Create a digital portfolio. Sometimes a bit boring of an assignment, but I think my professors were just trying to hammer in the fact that portfolios are no joke. If you’re looking for a design job, you must have a portfolio that looks nice, runs well (if it’s on the web) and is comprised of only your best pieces (don’t just throw everything in). Design is visual. No design company will hire you if you have a great cover letter but your portfolio is subpar. So taking the time to make an outstanding and current portfolio is one of the best things you can do. You may even need one before you get to college. Many design universities require having a portfolio to get accepted into your desired program.
- Networking: It’s all about who you know. The best part about college is that there are so many free resources at your fingertips. Use them. Those seminars that you’re not required to go to? Go anyway. That guest speaker that comes to speak to your class? Ask him or her some questions. Get to know as many people as you can and you’ll be glad you did when it comes time to find a job.
5 THINGS THAT PROFESSIONAL DESIGN EXPERIENCE TAUGHT ME
- Handing in a project doesn’t mean you’re done with it. In school when you hand in a project you basically brush off your hands, relax and spend the next week waiting for your respective grade. While it’s true that in the working-world that once you hand in a project the bulk of the work is complete, you’re definitely not done. You’ll more than likely have multiple edits and minor tweaks after you hand in the first draft. Information may change or need to be added. You’ll also need to clean up any files depending on if it’s a print or digital piece.
- You won’t need to be a jack-of-all trades and create a project entirely on your own. During my college years there would be times when I would work with a group, but often assignments were an individual task. In the job force you’ll be working collaboratively with others and concentrating on doing one specific thing like designing the interface or coding the site. Though it may not be the same thing each time, (which is why it’s beneficial to know as many different programs and platforms as possible) you won’t need to know every programming language, Flash script and why Bodoni typeface looks better on the piece than Myriad.
- With that said, learning doesn’t stop after you graduate. I know this sort of counteracts my last statement that you don’t need to know everything, but that doesn’t mean you can’t keep learning as much as possible. Technology moves like a jet—as in fast. What you learn in college will probably be outdated within the next two years, or will at least evolve. So taking summer courses or online courses like iD 365 to learn or sharpen your skills will make you even more successful.
- Deadlines will be short and meeting them is critical. In college if you miss a deadline you get a bad grade. No biggie, you can always make it up later. At a professional design job if you miss a deadline, it means that you’re letting someone else down as well. To add even more excitement, deadlines aren’t nearly as long as the ones that professors give you, (and for good reason, in college professors are trying to hone your skills, once you have those, working fast is the next step.) and you’ll more than likely be juggling multiple projects at once. But that’s part of what makes being a designer fun.
- Attitude is everything because you won’t be in complete control of your projects anymore. In design school, the professors will give you a project foundation, but ultimately you get to decide what to make. You don’t have to answer to anyone, except yourself. Enjoy it, because when you begin to design professionally, you’re designing for other people. So that layout that you’re in love with might not look anything like the original once everyone who isn’t a designer gets their hands on it. Someone may want a specific word to stick out or an image to be bigger and while you may cringe at altering your design, you can’t really fight it too much. I’ve found though, that even when I don’t want to change my design, if I try to make the edits with the best possible attitude, I can usually make something that I thought would look terrible into something that looks good again. That is, after all, why they hired you in the first place.
WHAT ABOUT YOU?
That’s what I’ve learned thus far in my design career. It will be interesting to see how much I learn in the next five years. I have no doubt it will be a lot! What about you guys? Students and professionals alike…what have you learned in your experiences so far? Anything big that I missed that you think people should read? Leave a comment and let us know…because there’s still much to learn.
January 24th, 2011
Posted in: iD Tech Bloggers
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:
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.
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.
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.
After you’re satisfied with your cover design, print it out and glue it on the top cover of your book.
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.
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.
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.
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.
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.
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!
July 19th, 2010
Posted in: iD Tech Bloggers
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:
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.
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.
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.
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.
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.
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.
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.
Change your menu settings to be the following:
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.
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…”.
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.
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.
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.
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.
Continue to do this until you’ve spelled out the word, “Greetings” using the CMYK color codes below.
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.
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.
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.
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.
Now to up the Image>Adjustments>Threshold. Move the slide so that your Threshold Level is at about 141.
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.
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.
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.
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.
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.)
June 22nd, 2010
Posted in: iD Tech Bloggers
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:
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.
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.
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”.
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.)
Now, click on Gradient Overlay and create a blue, radial gradient with these settings:
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.
(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.
Next go to Image>Adjustments>Hue/Saturation and change the Saturation to -100.
To create the light texture feel, change your Layer Property to Soft Light and the Opacity to 40%.
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.
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.
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”.
Pick a dark brown color (I used #844100) and use the Paint Brush Tool to paint in Mario’s shoes.
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.
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:
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.
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.
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:
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.
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.
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!
May 13th, 2010
Posted in: iD Tech Bloggers
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.
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.
Here’s what three of my co-workers/friends at the iD office came up with today when we tried this exercise:
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.
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!
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:
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!
April 13th, 2010
Posted in: iD Tech Bloggers
March 25th, 2010 by: Marta
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.
- 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.
- 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.
- 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.
- 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.
- 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,
Co-Owner and President
March 25th, 2010
Posted in: CEO's Blog
March 12th, 2010 by: Marta
When designed creatively and effectively, icons are a great way to convey a simple, universal message without having to use words. If you look around at the iD site, you can find icons everywhere. Take a look at the Web & Graphic Design Course page…it has a nice large icon right at the top of the page so right away the viewer has an idea of what the course is about. If you look deeper into the iD site, you’ll be sure to find other icons.
After seeing how we use icons, you might be thinking to yourself…how can I find some cool free icons to use in my projects? Easy…create your own! Let’s get our design fingers ready, our genius minds in gear and create some awesome icons.
WHAT YOU’LL CREATE
Each of the icons we’ll be creating won’t require any intense drawing skills, since they’ll all be created by merging different shapes that are already available in Adobe Illustrator.
We’re going to create three iD youth summer camp icons; an iD Texas Summer Camp icon, an iD Arizona Summer Camp Icon and a fun, Summer icon. Here’s an example of the style of icons that we’ll be creating and the final result that you’ll have after this tutorial:
TOOLS OF THE TRADE
There will be four main tools that we’ll be using in Illustrator for this project. These will be:
The Shape Tool: This tool gives you the option to create all different kinds of vector shapes. Unlike Photoshop, where you create raster shapes, vector shapes can be enlarged or minimized within Illustrator or another vector program without losing their quality.
The Direct Selection Tool: This tool allows you to select a specific point or path on a shape. Each shape you create will have multiple points and paths, which will combine to make one final shape.
The Selection Tool: When you want to move an entire shape rather than a specific point or path on a shape, you’ll use this tool. It picks up your entire shape and lets you move it around your screen to another location.
The Fill and Stroke Tool: You’ll use these two tools to choose which colors you want your shape to be. The Fill Tool will be the color of the inside part of the shape, while the Stroke Tool will be the color of the outside stroke of the shape. 
The Pathfinder Palette: This palette allows you to combine and subtract different shapes to one solid shape. Since this is an intermediate tool, we’ll be getting more in depth later on in this tutorial.
PREPPING YOUR WORKSPACE
Since it’s sometimes difficult to draw things from memory, it can be helpful to grab images off of the web so that you can get an idea of how something looks. Below are the starting images that we’ll be using. You may want to right click and save them to your computer so that you can bring them into Illustrator.
Open Illustrator and create a new 8.5” tall x11” wide web document. Then bring in the image that you just saved, by going to File>Place>Select the image you want to bring in.
Just like Photoshop, Illustrator has a Layers Palette. It’s always a good idea to name your layers for better organization. To rename a layer, double-click on the text that reads Layer 1, then re-name it “Original Clipart”. Now lock the layer and create a new one labeled, “Icon Circles”.
Now let’s create our circle for the icon. Click and hold on the Shape Tool to select the Elipse Tool. Then draw circle that has a black fill color and a 10-point green stroke color.
Copy and past three more icons to use later on for the other icons. Lock this layer and create a new layer, called “Icon Artwork”.
SHAPE UP: CREATING THE TEXAS STAR SUMMER CAMP ICON
What we need to do now is figure out which shapes will make up the Texas icon. Looking at our image of the star , we can pick out two shapes. The circle shape and the five star shapes.
Using your ellipse tool again, draw a circle in one of the four icon circles you drew previously. (Remember you’ve locked the “Icon Circles” layer, so your new shapes shouldn’t interfere with the original image.)
Now go to your Shapes Menu and click on the Star Tool. Change the fill color and stroke color to white and draw a star inside the circle you created in the previous step.
Change your fill color and stroke color to green and draw four, tiny stars to surround the star and circle you just created.
And you’re done with your first icon! How easy was that? Think you’re up for the next icon creation challenge?
FEEL THE HEAT: CREATING THE ARIZONA SUMMER CAMP ICON
To create the cactus icon, we’ll be using the Rounded Rectangle Tool from the Shape Menu. Click anywhere on your artboard to bring up your Options Menu and then change the Corner Radius of your shape to 25 px.
Now using the same shape multiple times in different sizes, recreate the cactus so it looks similar to the one below:
It’s time to use the Pathfinder Tools! This menu of tool can be a lot of fun and really helpful. You’ll see why in this step. First select all of the shapes that make up your cactus. An easy way to do this is to click hold the Shift Key, while selecting each shape with the Selection Tool (V).
With all of your shapes selected, go to the Pathfinder Menu. (If it’s not open, you can go to Window>Pathfinder.) Then click on the Unite Tool. (It will be the first one on the top row.) Your cactus should now be one, solid shape.
In design, the details make all the difference. So I’ve changed the color of my cactus to be green on the inside and have a white border. Then I added the cactus needles by using the line tool. I also added a slight highlight by drawing another thin rounded rectangle in white and setting its Opacity to 60%.
ADD & SUBTRACT: CREATING THE SUMMER CAMP ICON
The Summer Camp icon is going to sharpen your Illustrator skills even more. First we’ll create the bucket portion of the icon. To get started we’re going to draw a green rectangle. Use the Direct Selection Tool (A) and click on the bottom right corner of the rectangle. Then use the left arrow key on your keyboard and move the Shape Point over about 5 spaces. Now, use this same process to move the other bottom point in.
Next, change your fill color to black and your stroke color to green and a thickness of about 2. Draw an oblong oval and place it on top of the shape you made in the previous step. Create another oval with a green fill and stroke color and place it at the bottom of your main shape.
To create the bucket handle, draw a circle with no fill and a white stroke. When you draw a circle in Illustrator, the circle is made up of four paths (or lines). Use the Direct Selection Tool to select to two paths on the top of your circle and delete them so you have half a circle left.
Now move your half circle over your bucket so that it looks like a handle hanging down. Depending on the size you made your circle, you may need to make it bigger or smaller to look correct. Let’s group all of the shapes that make up your bucket by selecting them all at the same time and going to Object>Group.
To create the sand castle, draw another green rectangle and this time, move the bottom corner points out about 3 spaces. Duplicate the shape you just modified and place it on top of the first one and make it a bit smaller so it looks like a tier on our sand castle.
Create another half circle, and place it in the bottom, middle of your castle to make the door. Then draw two squares on the first tier and a single square on the second tier for the castle’s windows.
To add the flag on top, use the Line Tool and draw a short, white line on top of your castle. This will be the flag pole. To make the flag, draw a long, green horizontal rectangle. Next we need a triangle so that we can create the two points on the right side of the flag.
There’s not a triangle shape in our Shape Menu, but there’s an easy way to create one. Click and hold on your Shapes Tool and choose the Polygon Tool. Then click anywhere on your artboard and the Polygon Options Menu will pop up. Change the Sides Setting to be 3. Click OK and a triangle will appear on your screen.
Resize your triangle to be larger than the rectangle you just drew. You’ll begin to see the shape of the flag if you place it correctly.
With all of your shapes selected, go to the Pathfinder Menu. Then click on the Minus Tool. (It will be the second one on the top row.) Your new shape will look like the shape of a flag. Pretty neat huh?
Your new shape will look like the shape of a flag. Pretty neat huh? Place it on top of the small line that you made for your flag pole. You’ll probably need to resize it so it looks proportional to your sand castle. Once you’re satisfied with how it looks, you’ll want to group all of the shapes of your sand castle together.
WHEN ALL IS SAID & DONE
You can see that making icons really isn’t too difficult. You’ve just created three highly graphic icons by using simple shapes like rectangles, circles and stars. If you want, you can even bring them into Photoshop and add some cool effects like a glare or a drop shadow. Like any graphic design project, the possibilities are endless.
Now that you have an idea of how modify shapes into images for your icons, it’s easy to go out and create your own. A good rule of thumb for icons is to keep them simple. Many icons are resized to be very small on websites, so the less detail you can get away with the better. We here at the iD office would love to see some new icon creations that you’ve come up with, so if you create any, send them our way at info@internalDrive.com.
Until next time iD readers…here’s to hours of icon creation fun.
March 12th, 2010
Posted in: iD Tech Bloggers
February 12th, 2010 by: Marta
That big red, white and pink holiday is just around the corner and there’s still time to send out a pop-up valentine card to someone you know. I learned how to make these pop-up cards way back in elementary school and they’re easy and fun to make. All kids and teens out there, think of how much Mom or Grandma would appreciate it if she received one of these cards? Who knows, she may even sign you up for that iD overnight summer camp right after she opens it. I might give one to my manager at the office and see if it gives me clearance to attend a site visit at one of our Visual Arts Academies so I can brush up on my filmmaking skills. It’s always worth a try.
STEP 01: GRAB THE CARD TEMPLATES
Below are two templates that I’ve created that you can choose from. The first one allows you to have one pop-up image; the second template gives you spots for two pop-up characters.
Download: PDF Template 01: One Pop-Up Card
Download: PDF Template 02: Two Pop-Up Card
Once you download them, don’t print them out just yet, since you’ll want to first decide what and how you’re going to write a phrase on the inside of the card (the template you just downloaded.) You have two options here. The first is that you can grab art supplies you have at home and hand-write a phrase. If you decide to do this then go ahead and print the template.
If you have Photoshop at home, you can also open the PDF template into Photoshop and create your text there. After you’ve created your text phrase and any other design elements in Photoshop, then you can print the template on your home computer. Being that I love to use Photoshop, I decided to open my card up in Photoshop and add some of my own flair using the skills I’ve learned as a graphic designer.
STEP 02: GRAB THE POP-UP CHARACTERS
Download the page of gaming characters to add as the pop-up elements to your card. You’ll be doing the same thing here as before; you can either color them with art supplies or you can color them in Photoshop.
Download: PDF Template 03: Character Cutouts
If you thought all valentines were adorned with mushy hearts and flowers, think again. I’ve picked out some cool characters that could be in your projects this summer if you attend one of our game camps.
STEP 03: ASSEMBLE YOUR CARD
Now that you have all of your artwork prepped, let’s recap what you should have in order to assemble your card.
- The inside part of your card taken from the downloadable template.
- An outer part or cover for your card. You can use a nice piece of construction paper or just another piece of printer paper.
- Your cutout characters, colored and ready to go.
- Glue or another adhesive like double-sided tape.
- Scissors
Assembling your card is really easy. Let’s go through the steps:
- First take your inside template, cut out the card to be 8.25”tall x 5.5” wide. Fold it in half and cut on the dotted lines.
- Next, open your card up and fold it the opposite way so that your text is on the inside of the fold. Open the card slightly, and use your finger to push forward the flap(s) that you just created by cutting on the dotted lines in Step 2. Slide a pencil into the flaps, so it’s easier to do the next step. With the pencil still in place, fold your card so that you crease the flap you just pushed in.
Your card should now look like this.
- Cut out the characters you want inside your card. Then on the front area of your pop-up flap, place an adhesive like glue or double sided tape.Take your character and stick him on the front of the pop-up flap. Open and close your card and see how cool it looks!
- Now we just have to put the last finishing touch on it. We need the cover so that the person who receives the card doesn’t see the big pop-up hole(s). Cut out a piece of construction paper to the dimensions of 8.25” tall x 5.5”wide (if you want your card to have a border on the inside, cut it a bit bigger). If you don’t have construction paper handy, white printer paper will do just fine.Fold your outer cover in half, then using an adhesive, stick the cover to the outside of the card.
Once your card is dry, you can decorate the outside. I created my outside design in Photoshop.
That’s it! You’ve now created a 3D card adorned with your favorite gaming characters. The cards you make don’t even need to be used for valentine’s day…they can used for birthday’s or other holidays too, so feel free to modify the graphics by using your own designs. It would be great to see some photos of your pop-up card creations, so if you make some and want to share, send them to info@internalDrive.com. We here at the main office always love to see the creative side of our campers (and parents too!)
(PS: If you want to mail your artwork to someone, your card will fit perfectly in an A2 envelope. A2 envelopes are sized to about 4.375”x5.75” and can be found at most craft stores since it’s a common envelope size for cards. )
February 12th, 2010
Posted in: iD Tech Bloggers
January 18th, 2010 by: Marta
Hello iD readers! My name is Marta and I’m part of the design team at iD Tech Camps. I started out with iD back in 2004 as a summer camp instructor for Web Design & Flash® Animation at our Stanford University location. Fast forward to 2006 and beyond and I found myself a full-time employee at the iD headquarters doing what I love…being creative and having fun. So from here on out, I’ll be writing blog articles that will give you some fun tips and tricks of the trade about design, photography, Photoshop, Illustrator and creativity in general. Let’s get started, shall we?
SO, WHAT’S THE BIG DEAL ABOUT TYPOGRAPHY?
Whether you realize it or not, typography is an integral part of design. Not only does typography play a practical role in design, such as how easily a viewer can read and understand the information at hand, typography plays an aesthetic role as well. Different fonts can actually convey a specific feeling depending on how you utilize size, kerning, leading and styles.
CAN YOU SEE IT?
Did you know that typography is practically everywhere you look? Many common logos depend on the look and feel of the type within their logo design, and even though the everyday viewer may not see it, subconsciously the logo can send a message. Here’s some cool logos have hidden things in them.
Can you see the arrow in between the letter “E” and “x”? This is no accident; the arrow represents the speed and precision of the FedEx Company.
All you sports fans out there probably know that the Big Ten conference has eleven schools, but when the Big 10 name has been around forever, what’s a tournament to do? Add the number 11 in the logo of course. Can you see it hidden around the letter “T”?
Here’s a logo that had me surprised. At a quick glance the Sun Microsystems logo looks like just another logo. Take a closer look and you’ll see it’s quite complex. If you look carefully at the diamond shape in the logo, you’ll eventually be able to see that at any angle the word, “SUN” is apparent…all while only using the lowercase letters “u” and “n”!
THE BASICS
1.) Specific parts or measurements make up every letter in a font. The most common ones include:
- Ascender
- Caps Height
- Median
- X-height
- Baseline
- Descender
2.) Most font types can fall into these categories:
- Serif: Fonts that have serifs or “tails” at the end of each letter. These fonts often are used to convey a feeling of prestige. They are also common in most large areas of printed type, like books and magazines, because the serifs create an invisible line for the eye that allows for better legibility.
- Sans-Serif: Fonts that do not have serifs or tails at the end of each letter. These fonts usually convey more of a modern feel and are used on digital mediums since they are easier to read on screens and look better when placed at very small sizes.
- Script: Fonts that have a handwritten or fancy feel to them. Most often used as headings since they become difficult to read as font size decreases.
- Dingbats: Fonts that incorporate images in place of each letter. These fonts can be great tools for adding clipart into your designs since it’s easy to resize them without losing the quality.
3.) Some Important Typography Lingo:
- Font Styles: These can include such styles as Regular, Italic, Semi-Bold, Bold, Condensed (and many more). Not all fonts have a wide range of style options, but if you can find one that does it will give you more variety in your design, while keeping a consistent look to the text. (Myriad and Adobe Caslon Pro are good examples of fonts with a wide range of styles.)
- Kerning: Adjusting the space in between two letters.
- Leading: Adjusting the space between lines of type.
4.) Quick Tips When Incorporating Fonts into Your Designs
- Use only 1-2, (at most 3) different font families when designing a piece that incorporates a lot of text that is crucial information for a viewer. (ie: a newsletter, informative poster, website, postcard). Too many font families are often distracting to the viewer.
- If you choose to use more than one font family, it’s a good idea to use one for all of your headers or titles, and then use one for your body text. Don’t mix them up between headers and body text.
- When designing for the web, remember to keep in mind the age-old rule of thumb and use web safe fonts if you want your type to be HTML text. If you use a crazy, new font, your layout design may look great on your computer, but view it on another computer that doesn’t have that specific font and your layout will look completely different.
- Try using a font family that incorporates a wide range of styles. Styles are the options you have to make your text look Regular, Bold, Italic, Semi-Bold, Black, Heavy and the list goes on. Many free fonts can look neat as headers, but if you use them in the text body, they don’t always give you the ability to use different styles within the font family that you’re using.
There is a wealth of knowledge to learn about typography. Many beginning designers often over-look typography because it seems like an afterthought. Want to learn more about typography? Check out iD’s Web & Graphic Design Courses or the iD Visual Arts Academy. You’ll be sure to learn about typography basics in these courses!
In the meantime, what are some of your favorite examples of typography in our everyday world? Do you find interesting typography in logos, posters, billboards or magazines? Have you seen any really creative ways to manipulate text? Have you created any really cool examples of typography? Leave a comment and let the iD world know what you’ve seen or created!
January 18th, 2010
Posted in: iD Tech Bloggers
