Go Media Zine
Over the past week, I was out of the office. I was on tour with my band, and it was a decent time. I’m not the biggest fan of touring, but it can be fun to go out on the road and play cities that you’ve never been before. Anyway, there is always a lot of time to kill before the show starts, so we would usually stop at the local malls for about an hour or so. In a Hot Topic in (I forget what the name of the mall is) Kansas City, a shirt graphic caught my eye.
I’m sure many of you have heard the term “RSS” right? Well, it stands for “Really Simple Syndication” and my first few years of blogging and web design I completely ignored it. It wasn’t until 6 months ago I realized the power and fun behind RSS feeds. I noticed that all my favorite websites, forums, news portals, and blogs had them but for some reason, I didn’t care to click on them or learn about it. I sort of knew what they were about, meaning I could use some sort of RSS reader to view the blog. Why would I want to do that when I can just visit the website every day? I had my routine of visiting about 5-6 websites every single day and I was happy with that. But then it hit me…
I kept hearing all this hype about Netvibes and Google Reader. So, like most people, I ignored it the first 20 times I scanned past it in the news articles I was reading. But I eventually wandered over to Netvibes and decided to give it a try. After about 15 minutes I was addicted like a giddy little web nerd.
Time Saving Shortcuts
Howdy. This is week five of my series, and here are three more tips. I hope you enjoy them!
1. Time saving keyboard shortcuts: Really, every shortcut I learn makes using illustrator much more natural, but here are two biggies: 1. Ctrl+F pastes directly in front of the copied object 2. Ctrl+B pastes directly behind the copied object. These two shortcuts are really essential in Illustrator, especially when using the pathfinder. Ahh, the pathfinder… Ps- here is the whole list of keyboard shortcuts from Adobe: Keyboard Shortcuts
2. Learning how to use the Pathfinder I had no idea what the Pathfinder did before my intership with Cleveland web design company, Go Media, but I realized very rapidly that I needed to figure it out. My second night back home I sat down with the Illustrator, opened up ‘help’, started figuring out the powerful pathfinder. The Pathfinder can combine shapes, cut one shape out from another, keep only the shape where two other shapes overlap – and so much more. If you’ve not exploited the power of the Pathfinder to do more stuff with less effort, now is a great time to learn it.
3. A Richer Gradient: 1. Make a regular gradient 2. Copy the gradient and Paste in Front using Ctrl+F 3. Change the pasted gradient to a solid color that is slightly lighter than the shade in the middle of the gradient. 4. Move the solid color to the back with the shortcut Ctrl+Shift+[ 5. Change the blending mode of the gradient to multiply from the drop down menu in the Transparency pallete. The result is a gradient with richer, and probably darker tones than the original. Many of the technical tips in this series are pretty simple, but when combined and applied they represent the technical tricks I’ve learned at Go Media to make things look better, faster. And there is still more to come! Till then, happy designing.
Step by Step: How to Use Vector Packs
We get quite a few people calling every day with trouble opening or using our Vector Packs. I decided to write a tutorial specifically to help out newbies who aren’t exactly sure what they’ve just purchased. It’s amazing to know that people who aren’t designers or even own a piece of design software are buying our vector packs. I never would have expected that. This tutorial is essentially a beginner’s guide to our Vector Packs brought to you by your friends at Go Media, the finest website development company in Cleveland.
“Vector graphics (also called geometric modeling or object-oriented graphics) is the use of geometrical primitives such as points, lines, curves, and polygons, which are all based upon mathematical equations to represent images in computer graphics. It is used in contrast to the term raster graphics, which is the representation of images as a collection of pixels, and used as the sole graphic type for actual photographic images.”
Basically, a vector image can be scaled infinitely to any size. It can be enlarged to put on a billboard or the side of a building. It can be used on apparel and even on the web. Raster images (such as jpg, gif, tif, etc) cannot be enlarged without losing quality. So when buying design elements, you want the most versatile elements that can suit any application. Vector graphics are the way to go because they can customized however you like. That’s why we call them Vector Packs!
What’s the purpose of the Vector Packs?
The main purpose of the vector packs is to have a library or archive of commonly used vector elements that you can quickly access and implement into your designs. These are especially helpful if you are on a tight deadline and need to quickly add some flair or artistic elements. Some people buy them and simply use ONLY elements from different packs to create artwork that they never would have imagined they could create beforehand.
In order to receive our guide, please head over to our Arsenal article and subscribe to our newsletter. Your download will begin immediately.
Get the guide by following this link >>>
Head here and look for the subscribe link. Enjoy!
Part One of Seven Easy Principles to Becoming a Master Designer.
Rules about Using Fonts:
Ok, “master designer” might be a bit of a stretch – but you can at least become a “proficient designer” by following 7 easy principles. This will be the shortest, most informative series of blog posts you’ve ever read on how to become a better designer. Please note: these principles CAN be broken… these are not laws, they’re just general guides that all of us designers at Cleveland design firm, Go Media, typically follow when putting together a design.
Follow these simple design principles and you’ll be on your way to artistic excellence.
Principle One: Limit Your fonts. A big part of putting together a good design, as you’ll see, is making sure the over-all look is consistent. The best way to accomplish a consistent look to your design is limiting the number
Adobe Illustrator Shortcuts
Hello again. These last couple of weeks I’ve been sharing some of the broad lessons I’ve learned this summer with Cleveland graphic designers, Go Media, such as learning from criticism, and realizing the importance of presentation.
This week I’m going to get more practical and share some Adobe Illustrator tips that my coworkers have taught me.
We’re all in one big open room at the Go Media offices, so I have the freedom to steal glances at the other designer’s monitors. In my inexperience I would undoubtedly see them taking an approach I had not been exposed to, or would never think of taking. I started a running list of cool techniques I saw for future reference. I’d like to share some. We use Adobe Illustrator for almost everything here, so the tips are rooted in Illustrator. (Warning: these are revelations of a Go Media intern, so don’t be surprised if some of these techniques are less than ground-breaking).
1. Oliver showed me how to do make a radial.
- 1. Draw something cool (preferably long and narrow)
- 2. Activate rotate tool by pressing “R”
- 3. Move anchor point further out from the center of the object
- 4. Hold Alt and rotate the object by 5-15 degrees
- 5. Hold Ctrl+D (which repeats the last action) until radial is closed
2. How to Rotate Text Boxes:
- 1. Text boxes won’t rotate as expected when using the handles in Illustrator. Instead, the bounding box will simply rotate while the text remains horizontal.
- 2. In order to actually rotate the text, you must use the rotate too by pressing “R”, not by using the handles.
3. A Richer Gradient:
- 1. Make a regular gradient
- 2. Copy the gradient and Paste in Front
- 3. Change the pasted gradient to a solid color that is slightly lighter than the shade of the gradient.
- 4. Move the solid color to the back with the shortcut Ctrl+Shift+[
- 5. Change the blending mode of the gradient to multiply.
That does it for this week. If you’re a student like me, I hope you learned something new today. But don’t stop here! This is just a taste of what there is to know about Illustrator – and Illustrator is just one design application! I’ll be sharing more tips next week, but in the meantime keep educating yourself.
As some of you know, I’m a stats junkie. Since I’m involved with Cleveland web design, I love web analytics and keeping track of who is coming and going from all of Go Media’s sites. I use Google Analytics of course like everyone else. But the problem with Google Analytics, is it’s slow. Oftentimes you have to wait 24 hours or more for your stats to show up. So I tried using ReInvigorate for a free solution to real time stats. It’s been great so far, but my problem is that the most of the real time stats are only for the current date or even less. I can’t look at all my referrers from the past month. But I do get them in real time.
Then I discovered Clicky. They like to call themselves Web Analytics 2.0 – which is a fun buzzword. They are real-time and have a super friendly web 2.0 style interface that makes me feel comfortable. Their stats feel more valuable when designed nice. Weird huh? The numbers are the same as anything else, but because they are well designed, I find myself preferring them over other web analytics apps.
Heyyy. The lessons at Cleveland Design firm, Go Media are abundant, and here are a few more that have been kindly passed along to me by everyone here.
When working for a client or a friend, try very hard to decide what is most important to him or her, and deliver it. Is it timeliness? Rock bottom costs? Nailing the look? If you are confused, communicate.
Soak up the company culture. I’m very lucky to be at Go Media, which values experimentation, progress, quality work, and getting the job done. Once you figure out what your company culture values, be proactive about adding value, even (especially) if it requires you to step outside of your job description. (***Note: If you happen to be stuck in a negative company culture, don’t follow this advice but fight tooth and nail for positive change!).
While I’ve learned a lot of practical and technical things at here in Cleveland with design firm Go Media, I’ve also learned some more general, but valuable lessons. In my first couple of posts I’d like to share them with you.
1. Swallow your pride / Be open to criticism
Sometimes this first lesson comes naturally, and other times it does not. Yes, design is subjective, but as an intern I have broken some basic rules on many occasions. Its good practice to not be offended by criticism because it often holds valuable lessons. Don’t have access to awesome mentors like those at Go Media? Here are some ways to get more from criticism:
- Don’t Rationalize: “But I’m only 19”, “I just started using Illustrator a month ago”, and “But business cards are boring” don’t really matter on a professional level (which is what you’re aiming for, right?).
- Instead find the reason for your rationalization – if you feel you lack experience then do some free freelancing. If you aren’t up to speed with certain tools of the trade, take a class or wait for Go Media to release some awesome video tutorials. Be proactive about improving in your weakest areas, don’t just exercise your strong points.
- Wait: Does your latest design make you giddy when you glance at it? Put it aside and look again in a couple of weeks. You might notice certain elements that would create more unity if changed slightly. Become your own critic by removing the bias from your own eye with time.
- Just Do It: Even if you don’t agree with criticism you’ve received on one of your designs, just follow it anyway. At the very least you’ll expand your horizons of “what looks good”, and most of the time you’ll find the recommendation really does help!
2. Make the most of your failures:
- This revelation is straight from the Go Media guy himself – Bill Beachy. Bill has taught me that each failure is a gem of experience and a sign of progress. Don’t dwell in past failures, but don’t ignore them either. Each one should sharpen your eye for detail, help you avoid future mistakes, and help you be proactive about creating good work.
3. Presentation is important:
After all, isn’t this what design is all about? Presentation – of anything (information, emotion, etc). So when presenting your designs to a client or applying for a job be sure to spit polish every aspect of the presentation process. Do you have matching stationary? Is your cover letter nicely formatted and addressed to proper recipient? If you have trouble remembering these presentation ‘musts’ make a checklist and file it.
Brand yourself. Spend an afternoon coming up with a killer monogram or simple logotype for your name. Keep the color scheme consistent with the rest of your presentation materials, such as portfolio covers and stationary. Showing you can create and present your own materials will convince others that you’re the one for the job.
Check out the user showcase recently added to the Go MediaZine and post your self-branding projects there. If yours is a model of awesome self-marketing it could end up here in the Go MediaZine!
There are more lessons and other practical tips to come, so check back. Till then, happy designing.
The past month we’ve been working hard to come up with some new “weaponry” for the Go Media Arsenal. We are now introducing Motion Packs – premade, animated stock design elements. These are made especially for Motion Graphics artists, animators, and video artists. The idea is to be able to quickly copy and paste some animation into your video without being cheesy and obtrusive.
We also think it’s important to include the actual Adobe After Effects files for complete customization. Keep in mind these are not flash files. And they will only work with After Effects version 7 or higher. We also included Quicktime MOV’s of each animation complete with Alpha Channels so you can overlay the animation onto your video if you aren’t interested in the actual AE files.
Our first Motion Pack is the Hooladanders pack, which you can see in the video above. The set includes 15 animated hooladanders, flourishes, tribal shapes, etc. It also includes all the vector Adobe Illustrator files for each hooladander and a few bonus background animations thrown into the mix. To be honest, it’s a killer value compared to other stock video resources.
You’ve manufactured your product, paid the talented artists at Go Media Inc. to build your website, posted it live on the internet and then sat back, put your feet up and waited for the cash to start flowing in. But there was a problem. It didn’t. What the heck went wrong? You constantly heard about the fortunes being made on the internet. Where is your slice of the pie? You know you have a good product and the website design is top notch (naturally.) So, what’s wrong?
A lot of people are making them. A lot of people suck. The graphic designers here at Go Media don’t suck, and neither do you. This tutorial requires NO drawing talent… so don’t trip folks. You will however need Adobe Photoshop 7.0 or higher and Illustrator CS2 or higher. My name’s Dave, and this is my first ever solo tutorial. I’m very unorthodox and direct… so forgive me if I lose you guys during any part of this. I’ll do what I can to answer questions for people who think my tutorial is too confusing. So we’re going to make a gig poster! Subject matter: Deftones and The Fall of Troy in Cleveland, Ohio at the House of Blues on May 30th. Why are the Deftones not first, you ask? Because I like The Fall of Troy better and this is an unofficial poster, who cares?
Those winged scrolls are new from Vector Set 16. They would look great in this design!
Let’s get to business.
So what to make? Hmmm… something fierce. Maybe something militaristic? Considering the legendary event of the fall of Troy… we’ll go that route. After searching through some public domain photos from WWII, I found a picture of Dwight D. (Ike) Eisenhower on D-day lecturing some troops.
We’re going to use this as the base of our initial illustration… but the hand, it lacks emotion. It’s ok. We’re all designers and we can fix this, right guys?
Istockphoto.com (a lifesaver for all stock photo needs) will be our resource. If you do not have an account, get one. If you would rather go the free route – www.sxc.hu, better known as Stock Exchange, has a slick selection of free stock photos. You’ll still need an account, but it’s free.
I found this chick holding a gun on istock. We’re gonna get the cheapest one because the resolution doesn’t matter so much in this tutorial yet. Her hand will become Ike’s hand… holding a gun.
Next we have to cut out Ike and the girl’s gun so we can combine these different pieces into the same image. We’re going to use the pen tool to cut these out. I trust we can all accomplish this through knowledge gained in previous tutorials. WARNING: Using the pen tool in Photoshop is tricky… to keep your anchor points from drifting off into oblivion, you have to alt+click them (The same way you would click your anchor points in Illustrator). Make sure your shapes fill color is an obnoxious color so you don’t lose it in the photo.
Once you have the shapes made to cut them out (and it’s ok if it took 3000 shapes and layers to make it) you’re going to merge them all to one layer. Ctrl+click your “shape layer” to make a selection and then click the actual image’s layer. Press Ctrl+C to copy and then press Ctrl+V to paste it into it’s own layer. Do the same for the girl’s gun. Save your PSD’s in case you fumble up. The hardest part is over.
Now take both shapes and tastefully combine them on a fresh canvas. Some airbrushing or cutting may be needed to make it look real. It’s up to you. The rotating of the hand will be needed to make it fit on Ike’s arm. Make your image 300 dpi (image>image size) and don’t worry about the image quality. Merge the hand layer with the Ike layer and make it gray scale.
You now have Ike pissed off and holding a gun.
Here is where it gets a little interesting and it might be hard to follow here. Create three files in Photoshop that overcompensate in size for the Ike-shape – you don’t have to save them or anything. They’re there for copying purposes only. Throw a copy of Ike into each of them. Make sure they all remain on their own layers. We’ll be playing with the contrast next.
Above are the setting you’re going to make Ike the first two files. The third will be -100% on both Brightness and Contrast. It will result in just a shape of him in solid black. Now open Illustrator and make a new file at 11×17 portrait orientation.
Size down the Photoshop window and drag over each of the layers that have been brightness/contrast-adjusted into Illustrator. Line them up horizontally and start Live Tracing them one-by-one using the “Black and White logo” option. The option is located on the top tool bar once your photo is selected. Copy these attributes in the photo below.
Live Trace is basically Illustrator’s tool for deciphering and creating graphics into vector art automatically. It was a new feature in CS2 and it’s way cool, but can have some backlashes. Like all automated solutions to things done best by hand, there are sacrifices made with the result. A lot of times, your Live Traced images get lossy. Having them at a high resolution most times solves this but not always. In our case though… the dirtier, the better.
Now make sure each image is expanded. Use your magic wand tool and select the white areas that Illustrator assumed when you dragged in the Photoshop layer. They’re there, trust me. Once all selected – delete them. They’re not needed. Now’s your time to start figuring out a color scheme for this big project. Here’s what I chose.
Having 1 dark color, 1 to 3 medium tones, a light color, and a wild-card color is pretty mandatory when making 4 to 6 color prints. They work better. Although this wouldn’t be a silk screened poster, following this limited color rule assists in giving it an authentic gig poster appearance.
Doodads are always the hot ish in your designs, so we’re using some from our arsenal, the Go Media Vectorpacks. Along with a few we’ll be making from scratch. Below is what we’ll be using from the packs. (side note: we’ll be using a bunch of stuff from Go Media’s Arsenal. If you haven’t any cash to purchase some of the packs, we’ve got some samples here).
We’re using 5 splatters from the various Splatter packs and one wheel-type doodad from Set 5’s Decorative Ornaments pack. Now we’re going to get all these shapes ready and drag em over into our Illustrator file. Mind you we have not touched Ike yet… don’t worry about him or the colors. Let’s get trendy.
Make a long, skinny rectangle and duplicate it about 80 times (alt+click and drag it to copy it once, and then press Ctrl+D over and over again until you get a lot of bars) or more depending on your preference. Align them to the center and space them evenly. Now use the add function in your pathfinder box and expand the selection. Now that it’s own shape – rotate it 45 degrees (holding shift + rotate will rotate the shape in increments of 45 degrees). Duplicate that shape about 3 or 4 times.
Now duplicate/take a splatter from the vector art we’ll be using and place it on top of that shape you made. Select both objects and intersect them (it’s an option in the pathfinder box as well). Expand the appearance of your object.
You now have a distressted pattern of diagonally running lines. It’s a pretty neat trick to add some organized distress to your designs. Do this a few times with different splatters. That is why I’m encouraging duplicating your objects and not just dragging and dropping. A lot of these shapes need to be kept preserved because they’ll be used over and over again throughout this project.
Now make sure your actual poster area is clear of any objects. Moving them to the sides of the artboard and separated is always a good thing to do so you can just drag in what you need when you need it. Make a rectangle in the 11×17 area. Bleed of the edges a little bit for good measure. Now fill it with a gradient of color 1 and 2. Throw a medium color in there if you want it to blend smoother (I added some earthy-red in the middle). It might help, or it might not, who knows. Experiment and be different.
Now we turn to the Go Media Texture Packs. I want a concrete-looking surface to start this off with. We’re going to use Concrete8.jpg. It’s a nice and has lots of good grainy tones. Place it into your file (file>place).
Stretch the image to fit the poster size. Now go to your transparency settings and choose the multiply setting. All the dark ridged areas of the texture are now accented onto the gradient. Drop the opacity down to like 30% or so. Lock these two objects in place at the very bottom and we’re onto designing the focal piece of the poster.
So now back to good ole’ Ike. Make the Solid shape of his body Color 3, The medium-detailed shape Color 4, and the least detailed shape Color 2. Align them in this order – Color 3, Color 4, Color 2. You have your focal image almost intact. Add a stroke of the same color to Color 3’s shape to bring it all in. Expand the stroke if you need to, in case we do any abnormal sizing to the figure. Group the three objects, and there you have Ike.
Take the wheel object we chose from Set 5’s Decorative Elements pack and place it right in the middle of the poster (above the gradient/texture combo). Size it up huge if you have to. It will accentuate Ike’s figure in the design. Fill it with Color 1 and drop the opacity down to 30%. We’re done with that.
Grab all those crazy diagonal line objects we made and fill them with color 3 or 4′ (your call, color 3 was too strong for my liking – I chose 4). I duplicated them and threw them in the middle-area of the poster, kinda outlining where Ike will be. Grab Ike and throw him in the mix. Make sure he’s the top layer. We’re almost there.
Let’s play with our text options. I want something nice and organized, but already beaten up with some grunge. I don’t want it a grungy impact font because those are way too common for post-hardcore bands nowadays… Luckily we created the Affliction font (located at our Arsenal site). It’s styled well and beat up tastefully. We’re using it!
So we’re gonna play with the font and sizing. After a few options, I think stacking the text all the same size by breaking up “THE FALL” and “OF TROY”and adjusting the tracking and leading should do it. Check out the settings I used below.
Duplicate that in case it gets messed up and right click the text and create outlines. Color it with color 3 and place it right above Ike in the poster. Add the Deftones with a larger tracking size and smaller font size and we’re in business.
I added a rectangle at the bottom for the venue information. I applied a stroke to the rectangle, broke up Ike’s group, and wedged it between the Color 4 object of him and the Color 2. Since we won’t be moving Ike at this point, we’ll leave him ungrouped, but the effect just created makes Ike’s figure look almost like a part of the rectangle; eliminating the look of the area being an afterthought. Now add your venue’s information and all that good stuff. Adjust your bleeds, save it out… and you are DONE!
Thanks for reading my first tutorial, I hope you learned something. I’m now going to go eat a hot dog.
Advice for Graphic Design Students
About twice a week I will get a letter from a student or young graphic designer that asks me a variety of questions. Typically they are questions like: “How do I get started in the design industry?”, “What software should I study?”, and “How can I work for Cleveland Design firm, Go Media?”
After writing lots of very long emails, I thought perhaps I should put together an article of my answers and post it here so that everyone can read it.
I want to stress that these are only my opinions (I’m William A. Beachy). These are not necessarily the opinions of everyone at my firm (Go Media Inc). And, they are only that: opinions. There are a great many ways to design, a great many ways to get into the industry and a lot of different pieces of software. I can only give you my recommendations based on my personal experiences. If I say something that does not fit with what you’re doing don’t necessarily stop what you’re doing, Just take my advice and log it in your brain. Over time you will figure out what works for you.
So here goes.
Does Go Media offer internships?
We do have very few limited internships. We are typically looking for designers that are in their junior year of college. Basically, you need to have enough skills to come in and be a productive employee. While you will learn a lot as an intern
Hey everyone! Welcome back to Go Media’s Design Blog – where our talented graphic designers share their wisdom with our fellow artists. There has been such a wonderful response on my vector art tutorial “Beautiful Vector Illustration” that I thought I better write another one. If you recall in that tutorial I discussed how to create vector illustrations using photographs as your starting point. A technique of vector illustrating that takes a little bit more skill that I did not cover is starting with a hand drawn sketches. I will focus on that technique of vector illustrating for this tutorial.
For those of you without good sketching ability – please don’t jump ship just yet! I will also discuss a number of tips and techniques to using your pen tool that applies to ALL vector artists – so keep reading. You’ll still learn a thing or two. And who knows – maybe you try to sketch something anyway.
I am going to meander a bit between different sketches, but here is one example of a vector illustration that was based off of a sketch.
This is a design our firm was hired to do for the rock band Mr. Gnome. The theme was straight forward,
We are happy to announce that Go Media was featured in the latest issue of Computer Arts (#134 – April 2007). They ran a little feature on our vector packs and included a sampling of them on the CD that comes with the magazine. Click on the image to read the write up. Here is a quick rundown of what the editorial said about our vector packs:
“Tight deadlines are an unfortunate reality of commercial illustration. Clients rarely give you a comfortable amount of time to complete a project so it’s handy to be able to take a few shortcuts once in a while.
If you’re creating vector illustrations, one of the most laborious parts of the job can be finding good source images to trace or vectorise, so these ready-made vector images are a godsend. Go Media’s Vector Packs have been cleverly categorised into sets of commonly used design flourishes, such as halftone patterns, paint splats, and arrows, which means you can just grab what you need without having to trawl through masses of unsuitable images.”
There is also a special discount code offered by Computer Arts, but you’ll have to buy the issue to find out what that is :-)
After Effects Tutorial from Cleveland Graphics firm, Go Media
Like a lot of motion designers I spend many hours trying to accomplish complex animations in a short amount of time, while attempting to optimize my workflow within After Effects, Photoshop, and Illustrator. This tutorial utilizes Trapcodes Particular, which is one of After Effects more popular 3rd party plugins. Creating an animation like a flock of birds is very versatile and is a great filler animation which can add a lot of style to a piece. You can also adapt this technique to create other flying creatures…. perhaps a flying skull with flapping wings?
Here’s a short clip of the Go Media promo reel that utilizes the bird animation that you will learn to create. (To view the entire promo reel, click here and scroll down to the bottom of the tutorial).
[kml_flashembed movie="http://www.youtube.com/v/LdC5vVI6VDg" width="425" height="350" wmode="transparent" /]
What you’ll need:
A working knowledge of Adobe After Effects
Trapcode’s Particular Plugin
So what we are going to do is create a flock of birds in After Effects using Trapcodes plugin, Particular.
1. Open up After Effects
Create a composition called “bird.” Set your composition settings to something similar to this:
2. Set up your Wing Layers
Once you have your composition set up, create two new solid white layers both about 300×300 pixels. Name one of them “right wing” and the other “left wing.”