Articles by Month: August 2012
Welcome to the 1st edition of the “Go Media Guest Pinner Gallery Showcase.” If you aren’t a fan of ours on Pinterest click this link to start following what we pin. This showcase features the best pins from our Go Media Guest Pinner Gallery, so these images are the ones that you all found and shared with us. If you would like to be added to the gallery send me an email at [email protected] Happy Pinning! :)
Note from the editor: This post was written by Pete Maric. Pete designed Go Media’s beautiful studio in Cleveland, Ohio. What else do you want to know? Well, he’s also worked with three of the top 50 retail design firms in the United States. He has had the pleasure of working for brands such as Adidas, Nintendo, Everlast, and Dick’s Sporting Goods, among others. His work has been featured in local, national, and international publications including The Adobe Illustrator CS3 and CS5 WOW books, Photoshop User Magazine, Cleveland Magazine, House Trends, and Architecture in Perspective. He also teaches 3D modeling and animation at Tri-C Community College and plays guitar.
Let’s get started!
As always, it’s a pleasure working with Go Media! I was excited to create his illustration for their headquarters exterior renovations, and my main goal was to make it look as good as possible.
In this tutorial I’ll walk you through the process for manipulating photographs, compositing 3D elements using Cinema 4D, establishing perspective grids, and using elements of the existing photo to create an accurate illustration.
Step 1: Fix the Photograph
Drag guides next to the building walls, double click the background layer. Edit > Transform > Skew. Drag the corners of the image using the skew function until the walls are lined up with the vertical guides. Flatten image. Use the crop tool to resize the canvas, dragging the handles past the edge of the image to the desired aspect ration/composition. Save image.
Step 2: Create 3D Elements
In Cinema 4D, create a new material and import the corrected photo inside the color channel, uncheck ‘specular’. Create a background object and place the new material on the background. Now the photo should be visible in the perspective viewport. If the photo looks disproportionate, too long or too narrow, you’ll have to match up the output size of your file with the aspect ratio of the photograph. To do this, open the render settings and background material so you have both windows open next to one another. In the material editor, color tab, the resolution size is right under the imported photo. Type these numbers into the render settings output width and height.
Step 3: Create the Bike Racks
To create the Go Go Go bike rack, start with a spline text object and type in the letter ‘G’ using Frutinger font. In the front view trace the center of the ‘G’ with a Bezier spline. Next create a profile with a circle spline, then drop the Bezier and profile splines into a sweep nurbs object. Change the ‘G’ text spine to an ‘O’ and repeat the same process. Group the ‘G’ and ‘O’ into a null object, then duplicate using a Mograph cloner to create three ‘Go’ bike racks.
Step 4: Compositing
To composite the bike rack into background, add a floor plane and use the grid in Cinema 4D as a guide to match the floor plane and ‘Go Go Go’ bike rack to the perspective of the photo. Add the background material onto the floor plane and use a frontal projection. Right click on the floor plane > Cinema 4D tags > Compositing Tag. Inside the compositing tag, check ‘Compositing Background’ so the floor plane is not visible in the final render. Add a camera, right click the camera > Cinema 4D Tags > Protection Tag.
Step 5: Light the 3D scene.
Create two omni lights; one for the main light source with hard shadows turned on and the second as a fill light without shadows, and position them into place. Use the photograph to determine where the light source is coming from, this is where the main light source should be placed (top right of photo). In Photoshop, pick the color of the light (sky) using the eyedropper tool and enter the RGB values for both of the omni lights colors in Cinema 4D. Additionally, use a sky object with an HDRI material for reflections on the bike rack.
Step 6: Render the Cinema 4D Scene
Open the render settings, make sure the output size matches the resolution of the photo. Click effects to add a Cel Renderer effect. Check ‘Outline’ with edge color set to black and background color set to white. Specify a save path and render the line drawing.
Next, create a multi-pass render. In the render settings, check ‘multi-pass’, then ‘add image layers’ with the multi-pass button. Turn on Global Illumination and Ambient Occlusion via the effects tab. Check Save > Multi-Pass Image > Check ‘Multi-layer File’ > specify a save path, name your file > hit render.
Step 7: Establish the Perspective Grid
Since the perspectives in photographs are usually not 100% accurate, it is important to establish a perspective grid to work off of prior to creating the final line drawing.
In Photoshop, create two new layers; one layer filled with white and opacity set to 50% and a new layer for a rough perspective grid. On the perspective grid layer, choose a red color and start laying out the perspective grid using the line tool. First establish the horizon line which should be at approximately 5’-6” above the ground (5’-6” is the average person’s eye level). If there are not any people in the photograph, you can use other elements to approximate this height such as doors (6’-8” average height) to get as close as possible to 5’-6”.
The next step is to find the vanishing points, where the perspective lines converge. In this illustration, based on a 2-point perspective, one vanishing point would be on the left side (as shown in the illustration below) and other point on the right, way off of the canvas and not visible in this illustration.
Once the horizon line and vanishing points are established, draw in some general perspective lines for important architectural elements such as building lines and top and bottom of windows. Continue to block in the new elements like signage and awning.
Step 8: Create a Final Line Drawing
Open the cel render created in Cinema 4D > Select All (Command A) > Copy (Command C) > Paste (Command V) into the illustration file. To create the rest of the line drawing, use 4 different line weights all on separate layers; 3pt, 2pt, 1pt, and an additional 1pt w/ 50% opacity. Start by drawing with the heaviest line (3pt) on the bottom of the building and bottom of sidewalk. The 2 pt line can be used for the building outline, 1pt line for interior details like windows and doors, and thin line for corbels/crown, garage door, and background trees.
When creating the line drawing, we can take a little bit of creative liberty from the existing site conditions. For instance, in the existing photograph, the telephone pole by the corner of the building is slanted and blocking the new awning. Let’s straighten this so it’s completely vertical and move it over to the right a few inches so it does not block the new awning. Additionally, we can slim down the foreground telephone pole and move the street names down so they are visible in the illustration.
Remember, we are trying to create an idealized representation of this building. If a few elements need to be shifted around for the sake of clarity, feel free to exercise your creative license. Just make sure to run these changes by your client and get their approval prior to proceeding to the final rendering.
Step 9: Establish a Color Scheme
Use the eyedropper tool in Photoshop to select a brick color from the existing photograph. Launch the website www.kuler.adobe.com, input the brick color’s RGB values to create a custom scheme, then play around until you come up with a good looking color palette.
For this illustration, I started with the color of the existing brick, played around with Adobe Kuler, then experimented with different sky gradients in Photoshop until I came up with a scheme that worked for this building.
Step 11: Set Selections
Before adding color to the illustration, set selections for important architectural elements. Use the pen tool to draw a path around the building > Command + click the path in the path palette to activate the selection > Select > Save Selection > name the selection ‘building’ > Hit OK. This will create a new channel in the channels palette. Repeat this process for the windows, go bike rack, and foreground telephone pole.
Step 12: Render the Illustration
Start the rendering by creating a custom gradient using the blue color from the color scheme with a yellowy/orange color. Create a new layer, set it to multiply blend mode, and drag the gradient from top to bottom to create the basic color for the sky. When rendering, starting with the sky color is a good idea because this sets the mood for the entire illustration. Next, add a layer mask to the gradient > command/click the ‘building’ selection in the channels palette > paint away the building, but let some of the color on top and bottom bleed into the building.
Next, create additional layers for the sidewalk and street, set blending mode to multiply, pick colors from the existing photo, paint in street and sidewalk.
Step 13: Render the Windows
Window Color: Duplicate the sky gradient layer > Layer > Layer Mask > Delete, and rename the layer to ‘windows’. Create a new layer mask in the layers palette > Command/Click the windows selection in the channels palette > Select > Inverse > use a large brush and paint away everything, leaving just the color for the windows. Duplicate the windows layer and reduce the opacity to around 50%.
Window Reflections: Open a photograph of a cityscape to be used for the window reflections > Select all (Command A) > Copy (Command V). Jump over to the illustration file > Command/Click the ‘windows’ channel > Edit > Paste Special > Paste Into. This will paste the photo into the window selection. Click the window layer > Edit > Transform > Skew > manipulate the pasted photo until it somewhat matches the perspective of the illustration. Add a 4pt gaussion blur to the photo and reduce the opacity to around 40%.
Window Light Rays: Create a new layer > use the pen tool to draw some light rays > fill with an off white/yellow color > add a layer mask > mask out all areas leaving the light rays only in the windows.
Step 14: Render the Brick
For the building, we’ll use as much of the existing photograph as possible. Duplicate the background photograph > add a watercolor filter (Filter > Artistic > Watercolor) > and drag the layer to the top of the layer stack. Add a layer mask > activate the building selection > Inverse the selection > paint away everything except the brick. Activate the window selection > mask out the window area to reveal the rendered windows from the previous step.
Step 15: Create a Brick Pattern
On the duplicated background layer, select a portion of brick using the Polygonal Lasso Tool. Create a new file at 11×17 inches, drag the brick selection in to the new file. Use the skew transform tool and align the top and bottom so they are horizontal, not slanted. Duplicate this layer to create a consistent brick pattern.
Next, create a new layer and draw grout lines using the line tool in Photoshop.
Step 16: Fix the Inconsistent Brick Pattern
Flatten the new brick and grout pattern > Select All (Command A) > Copy (Command C) > jump over to the illustration document and paste the brick for the front of the building. Use Edit > Transform > Skew to match the new brick pattern to the perspective of the illustration > mask away the areas for the windows, doors, telephone pole, and signage. Repeat this process for the corner of the building and left side.
Find a brick pattern on www.cgtextures.com and use this texture to render the building on the far right side.
Step 17: Add Background Trees
Duplicate the original brick layer (the one with the watercolor filter applied) > Mask out everything except the background trees, cars, and grass > set the layer to ‘Multiply’ blend mode > Reduce opacity to 90%. Fix any blotchy grass areas with the clone stamp tool. Duplicate this layer > flip horizontal > move to right side of illustration > mask out unwanted areas to create the right side tree.
Tip: Keeping all of the elements of the illustration on separate layers will give you complete control over the final look of the finished piece.
Step 18: Render the Go Bike Rack
Open the multi-pass file that was rendered from Cinema 4D. Double click the ‘diffuse’ layer > drag all layers into a group > name the group ‘Go Bike Rack Render’ > drag the entire group into the illustration file. Mask out each multi-pass layer individually and place the group into position.
Step 19: Render the Telephone Poles & Signage
For the telephone poles, use the background photo with a watercolor filter applied, mask out each telephone pole individually and keep all poles on separate layers. For the ‘Lorain’ & ‘W.45 St’ signs, use the text tool in Photoshop and skew each word into position.
For the ‘Go Media’ main sign, use the original reference image and cut/paste the sign into the illustration. Use Edit > Transform > Skew to match the perspective of the illustration.
To create the front awning, add a new layer, set it’s blending mode to multiply and paint in the black part of the awning. Copy/paste the Go Media logo mark from Adobe Illustrator into Photoshop. Use Edit > Transform > Skew to match the perspective of the illustration. Create the address in Photoshop using the text tool.
Step 20: Add People and Cars to Populate the Illustration
Turn on the perspective grid that was drawn prior to creating the final line drawing. Open your people and cars stock files > add watercolor filter to each file > place into illustration. Tip: Make sure that the eyes of every person are lined up with the horizon line.
Step 21: Add Shadows
Turn off all layers except the final line drawing and entourage (people & car). Create a new layer and manually paint in the shadows using a hard brush and a cool grey color. Set the shadow layers blend mode to multiply. In this illustration, the light source would be coming from the upper right.
Step 22: Final Touches
Street Reflections: Duplicate the original photograph > flip vertical > move down so the building is reflected in the street > add a gaussian blur > mask out everything except the building > reduce the opacity to 18%.
Birds: Use a custom brush > turn on scattering in the brush palette > choose a blue color from the sky > turn layer to multiply > paint in a group of birds.
Highlights: Create a new layer > use the line tool with a 1pt line > paint highlights on the right side of all architectural geometry.
Light Bursts: Create a new layer > set blending mode to overlay > pick a yellow color > paint with a soft brush over the front of the building > reduce the opacity to 60%. Create a new layer set to overlay and paint with an orange color on both right and left sides of the illustration.
Border: Fill a new layer with a dark blue color set to multiply blend mode > mask out the center of the layer.
Texture: Drop a watercolor paper texture on top of the entire illustration and turn the blend mode to multiply.
Step 23: Revisions
One thing that you should always anticipate when doing illustration work are client requested revisions. This is a very important thing to keep in mind when setting up your working files. Although assigning each line weight and all aspects of the rendering to it’s own separate layer may be a little bit more time-consuming up front, it pays off when you have to go back and revise your files. Tips: Keep everything on a separate layer, organize your layers into groups, and name all layers.
A few of the revisions to this illustration were to replace the side brick with a painted grey color, change Go bike rack to a brushed metal finish, and add clouds and a hot spot in the sky behind the building.
Change brick to grey: First turn off the new brick pattern in Photoshop to reveal the existing grey brick color. Next, use the clone stamp tool to touch up any wires, unwanted poles, and grass/weeds growing on the bottom of the building.
Change bike rack to a brushed metal finish: Open the Cinema 4D file and replace the Go bike rack yellow material with a stainless steel found in the content browser. Re-render the multi-pass file and replace the existing yellow color in the illustration with the new stainless steel.
Step 24: The final illustration!
Pour yourself a coffee warmer, you’re done!
Weapons of Mass Creation Fest partnering with Cleveland Public Theatre
Rapidly growing midwestern art, design, and music festival remains in Cleveland’s Gordon Square neighborhood, moves to August 16-18, 2013
CLEVELAND, August 8, 2012 — On the heels of its largest-ever attendance, Go Media’s Weapons of Mass Creation Fest (WMC Fest) is pleased to announce a partnership with Cleveland Public Theatre (CPT) to utilize one of the city’s greatest cultural and artistic establishments to provide a venue for its 2013 event. WMC Fest IV will be held on August 16-18, 2013, and will use the entirety of the CPT campus, which is located at 6415 Detroit Avenue in Cleveland’s Gordon Square neighborhood. Adding to the new partnership, Neoventures Events returns for the second year as the primary event management company for WMC Fest.
“We know our attendees will fall in love with Cleveland Public Theatre, which I believe is the heart and soul of the Gordon Square Arts District,” says Jeff Finley, Go Media partner and founder of WMC Fest. “CPT is so important to the Northeast Ohio region both culturally and from a community development standpoint that we felt partnering with them was a natural fit. Not only do we have a larger venue for speakers, but we’ve also consolidated the entire festival into one location. Attendees will no longer have to leave the building to see a band between speakers, because everything is all right there and self-contained. Having additional space will allow us to expand into breakout rooms for workshops and unique one-on-one learning experiences.”
Says Raymond Bobgan, Cleveland Public Theatre’s executive artistic director, “We are so excited to collaborate with WMC — we share the values of innovation and creativity, and common focus that runs deep locally, but has a national significance.”
While the impressive 2012 turnout signaled the need for a new venue, Finley wanted WMC Fest to remain in the neighborhood it has called home since its inception. “We’re proud to be able to stay in Gordon Square and are looking forward to working more with the neighborhood this year,” Finley says. “Thanks to CPT, WMC Fest will definitely have that punk-rock, art-and-design-summer-camp vibe even more so than it already does. The only thing we’re missing is a wide open area to camp out! It’s going to be the best WMC Fest yet!”
WMC Fest IV at-a-glance:
- NEW DATE: August 16-18, 2013
- NEW LOCATION: Cleveland Public Theatre, 6415 Detroit Avenue, Cleveland, Ohio
- 20 speakers, 20 designers in a gallery show, approximately 30 bands
- The premier art, design, and music event in the Midwest
About Weapons of Mass Creation Fest:
Now in its fourth year, Weapons of Mass Creation Fest (WMC Fest) is the premier art, design, and music event in the Midwest. Its goal is to inspire and enable the creative mind and will feature 20 speakers, 20 designers, and nearly 30 bands over the course of one weekend. Creative professionals, entrepreneurs, musicians, artists, students, and fans will gather to learn, get inspired, collaborate, network, and celebrate their passion for art, design, music, and entrepreneurship. Speakers, gallerists, and bands are renowned both regionally and nationally, and come to Cleveland from popular creative hubs like New York, Los Angeles, San Francisco, and Chicago. WMC Fest has seen attendance double each year since its 2010 debut, with more than 1,300 packing event venues in 2012. Learn More about Weapons of Mass Creation Fest.
About Cleveland Public Theatre:
Cleveland Public Theatre (CPT) is an anchor of the Gordon Square Arts District and the city’s leading stage for adventurous new theatre. CPT produces a bold season of new plays that attract a diverse audience. CPT has a special emphasis on developing local artists and arts entrepreneurs through its multiple developmental series. These series produce over 25 new plays by local playwrights and directors, and often launch that work to performances in other markets, such as New York and Toronto. CPT’s acclaimed education programs engage communities in devising new works that speak to contemporary issues, and empower participants to work for positive change in the community, engaging over 500 underserved youth and adults. Learn more about Cleveland Public Theatre.
About Go Media:
Go Media, located in Cleveland, Ohio, offers design services, products, and knowledge for clients who seek unexpected and compelling visual communications. Founded in 2003 by William Beachy and Wilson Revehl, Go Media now houses a team of artists, programmers, and strategists who practice the art of communication. Go Media works with brands who have a passion for smart design, bold creativity, and meaningful ideas. The company is active in building thriving creative communities online through educational content hubs, and via events including Weapons of Mass Creation Fest and On the Map. Learn more about Go Media.
General Media Information: [email protected] / 216-939-0000 x227
Applying for jobs can be a daunting process, but it is important to remember to put your best foot forward when sending out your applications. Employers get tons of submissions every day, so make yours stand out by not making any fatal errors. Read below for the top 10 mistakes designers make when applying for jobs and what employers are looking for in resumes, cover letters, and portfolios:
1. Sending resumes in .doc instead of .pdf
It’s surprising how often designers send resumes in the .doc format. Microsoft Word is not the program designers should be using when laying out their resume, and may result in an immediate rejection. We recommend using InDesign or Illustrator to design your resume. Your application is a great chance to show off your design ability so use design programs to layout a beautiful resume. One of things you will often do as a designer is creating logos, letterheads, and business cards, use the opportunity when you are applying for a position, to showcase those skills by creating your own brand identity for the documents you send to potential employers.
2. Sending form cover letters
Employers can tell when you have cut and pasted a form cover letter from the web. The jargon is always the same. Your cover letter is your opportunity to show your personality to the company you are applying to, so use the opportunity to demonstrate why you are the best person for the position. Use your own words, not the words of others to illustrate why you are the best candidate for the position. Include ways in which your style blends with theirs or call out specifics about their company like their company culture or artistic style as the reasons why you want the position. Don’t make it seem like you just want any position. Show that you want their position because you want nothing more than to work at their company. When you are applying, you are asking to be a part of their team so show you have some team spirit and you have taken the time to research the company and care about working there specifically.
3. Not following instructions/directions
Most companies will immediately reject your application if you have not followed the instructions they have outlined in their “help wanted” post or ad. Read the requirements carefully and make sure that you have followed them to a tee and have sent the requisites in the correct format.
4. Not showing a diversity of work in portfolios
Every portfolio should include work in the following categories: branding, illustration, print design/layout, and web design. If you also have work in other categories include those as well, but you’ll want to have at least 2-3 examples within each category listed above. If you are fresh out of school and don’t have much client work, create spec work to show you have the skills necessary to land the design job you want. If you only show you can illustrate and provide no work that exhibits your skills in designing brand identities, a company will not know you can complete work in those areas. Show a company you are a jack-of-all-trades designer and you can handle any client project that comes your way.
5. Spelling/Grammatical errors
If a potential employer can spot a spelling or grammatical error within seconds of looking at your resume, cover letter, or portfolio then you haven’t checked your work. What would happen if you made a spelling error in a clients’ project and sent it to print? Who would pay for the mistake? The answer is probably you or the company you work for. After you have completed your resume, cover letter, and portfolio, send it to friends, family, teachers, etc. and have them check over your work. If an employer can catch the mistake within mere moments of opening your documents, then your friends or family will be able to as well, saving you a potential rejection email for your carelessness.
6. Not having an online portfolio
We live in the digital age and every designer whether you are a web developer or not should have an online portfolio. Sites like Behance make it a breeze to customize your own portfolio site, so take the time to create one before applying for jobs. The best option is to have your own website so you can truly stand out amongst other applicants.
7. Obviously cutting and pasting from past resumes or cover letters
This is an egregious mistake. If your cover letter has 2 different fonts that might also be different sizes, it is obvious to them you cut and pasted and didn’t take the time to consistently format. I know searching for jobs can be a laborious process and many times you are applying for multiple positions at once, but the employer shouldn’t know that, all they should see is you are dying to work for their company and want nothing more than to be apart of their team, don’t get upset and frustrated, just know that there will be an opportunity for everyone out there, even for those who have had legal problems in the past, they can look for a job at https://www.felonyfriendlyjobs.org
8. Asking potential employers for recommendations or help in job search
When you apply for a position and are not awarded the position, you should not ask the employer for recommendations for other companies you should apply for. It is not the responsibility of the employer to aid in your job search, so don’t ask them for suggestions of their competitors. The web is a great resource to find job openings and design firms in your area. Take the time to look for them and don’t ask a potential employer to help you.
9. Not taking your time
This has been covered slightly in the other rules, but it should be iterated again. TAKE YOUR TIME applying for positions. Check your spelling, have someone proofread your resume, cover letter, and portfolio, carefully craft your cover letter to reflect your personality and interest in the company, and make sure it isn’t obvious to the employer that you have hastily put together your application. These little mistakes make it easy for an employer to not consider you as a serious applicant because you didn’t take the application seriously.
10. Applying for multiple positions in a company
When you apply for multiple positions in a company it shows that you don’t have a specialty. If you aren’t qualified for the position then don’t apply for it. Apply for the one you are most qualified for. If you are trying to branch out or gain a new specialty then apply for the position you are most apt for and once you have the position, pair up with the person who does what you want to do next and learn from them. It is much easier to move into a new area of expertise within a company than coming in cold.
It’s Friday – our last day of class. Today is only a half day. Our debriefing session wraps up at 2pm. They scheduled it this way so people would have time to get to the airport or train station. The two classes this morning were about how to organize your company for innovation. Even as designers, we can improve the way our companies foster creativity.
Organizing for Innovation:
All of the classes, including this one, were largely taught with case studies. This is a new and interesting way to learn for me. I’m more accustom to having teachers give me a list of information to memorize. I grew up thinking of learning in a very black and white way. My teacher has the information and what they know is exactly correct. This isn’t how any of our classes were at Yale. These classes on building an organization that’s conducive to innovation went something like this. First, we read a case study about a company that was very innovative. Then the teacher prompted the students to break the business model down. The students would be the ones to describe the different aspects of the business and why they worked (with just a little leading by the professor.) Next we would try to extrapolate principles. Finally the professor would say something like: “So, what’s the right answer? I don’t know.” The point is – the world is grey. Businesses are incredibly complex things. A business model that works for one set of people can fail miserably for others. Studying these cases serve to give us a direction. Finding the right path for you or Go Media will still require implementation and testing. Having said all that, here are a few things I took away from the course.
Innovation is not just about technology. Innovation can be about how you market a product, structure a business system or even how you communicate. So, don’t assume you need a chemical engineering degree to be innovative.
Innovation is all about application. Most innovations take concepts or technology that are already well know, but apply them in a new way.
Innovation requires investment. If you don’t invest the time and money to experiment then you’re unlikely to make any innovative discoveries. A good investment might be something as simple as giving your staff half of a day once a month to work on their passion projects.
Listen to your staff. The workers on the front lines have a better perspective on how their own jobs can be made more efficient. So, make a point of letting them know you’re open to ideas on improvement and then create a forum in which they can share them.
Build innovation incentives into your business model. It’s not enough to simply say: “Hey everybody, be innovative!” You have to schedule time for them, build a structure for them to share and fund the ideas that have potential.
Don’t punish failure. This is a personal one of mine. If you’re trying to innovate, you’re going to have failures. It’s part of trying something new. If you punish people when they fail then you’ll only succeed at making them to afraid to try new things. So, encourage your team to try new things. When things don’t work out, let them know it’s ok.
The last class was a wrap-up and debriefing. It started with a session where we each took turns sharing our takeaways from this week. Then Steven Permut gave us his summary of the most important aspects of building and running a business. I thought this was a great guide to keep me focused on how to apply the knowledge I’ve learned this week. I will share the points that my classmates and I had, but Steven asked us not to share his insights as they will soon be part of a book he’s writing. So, you’ll just have to wait till that hits the market!
Good business decisions start with research and testing. Generally, we make too many assumptions in business. Remember that your clients drive your business! So, listen carefully to them. Apply what you learn, get more feedback and repeat. This is also true of negotiating, building your business systems or deciding how to talk to c-level management. Do your research, apply and test!
Design is valuable to business. More companies need to recognize the value of good design and integrate it into every aspect of their organizations.
Business is valuable to designers. As designers we can sometimes be too arrogant about our wisdom in the area of how to apply design to the business world. What’s ideal for design doesn’t always work in the context of some businesses. So, while we’re asking companies to better understand our value to them, we need to work harder to understand the business side of things. Only by understanding more about the business can we understand how to best contribute with our design skills.
Ask the right questions and be a consultant to your customers.
Get to know the know the language of business. Every industry has lingo. It’s important to get to know and be comfortable with talking in the language of business owners.
Humility. Listen more and talk less.
You don’t have to be a natural born business person to get good at it. These things just require study and practice. So, make the effort.
People buy holes not drills. Understand the real value of what you’re selling. When someone buys a drill, are they really buying a drill? What’s the value of a drill to it’s customer? What is the problem being solved by the drill? The customer needs a hole! The drill solves that problem. So, in effect, you’re not selling a drill, you’re selling holes. Want proof of that statement? What if someone developed a new device that used a laser to make a sharper cleaner hole at the same cost. Would anyone continue buying drills? Nope. So, obviously, people aren’t buying drills. They’re buying holes! Keep this little analogy in mind when considering your value proposition to your customers.
Think long-term. With every decision in business, keep the long-term in mind. Keep in mind the lifetime value of a customer. Sometimes taking a loss today can turn into profits in the future.
Reframing questions makes room for innovation. This goes to the heart of this course. Your perspective on a problem will impose a structure within which you will try to solve the problem. But if you try to look at your problems from a different perspective, or, re-frame your question then you can often change the rules and find creative new solutions.
Greater value is created when you work together. A fun example of this was given in a class. Imagine an arm wrestling match where you were given 10 seconds to arm wrestle. Each time you win you get a Honda Civic. Each time your opponent wins he gets a Ferrari. What should you do? Maximize the value you can create by working together and split it! If you fight each other you might each only be able to win one car. But if you work together, you can let your opponent win 10 times in 10 seconds. That’s 10 Ferraris. Even if your opponent only gives you 2 Ferraris and he keeps 8, that’s still a HUGE improvement in value to both of you. When looking at any situation consider the net value being created. Don’t focus only on what you get.
They actually held graduation on Thursday night so we could celebrate without concern for when our flights left town, but I decided to hold of on blogging about it until the very end. That just seemed to make sense. The graduation dinner was another lavish meal. All our professors from the week were there. It was a great time to mingle, reinforce our connection with our classmates and celebrate the experiences of the week. Jeffrey Sonnenfeld gave a mini-commencement speech and then they called us up one by one to give us our completion certificates. They were very nice and included an 8×10 glossy photo of the entire class. The course didn’t have tests. Nobody was ever in jeopardy of not graduating. But it still feels good to have a certificate. A lot of hard work went into this week and will continue into the foreseeable future.
So, was it worth it?
Well, I’m a pragmatist. I went through this course with the skeptical questions of: “How can I apply this information to my business today? And, what’s it worth in dollar value?” So, I’ve left with a notebook full of ideas that I plan on implementing over the next year. I think they will easily give me a good return on my investment, but, we’ll see. A better question might be: Having taken the course, would I recommend it to others? The answer to that is easy – heck yes. The experience was amazing. The teachers are the beast-of-the-best. I think the networking was powerful. The knowledge itself is invaluable and I can’t give enough praise to the level of service we received. From the food to the hotel to the attention to details by the professors, the service was legendary. If you have an opportunity to go, do it.
Comic Book Inking and Coloring Tutorial
Earlier this year I was commissioned to come up with a series of character illustrations for Cohort Pictures new film project; ‘The Northern Mist‘, a suspense horror set during the Roman occupation of Briton. The illustrations would be used to help the rest of the creative team cast the roles for the film, aid in costume design and provide a bit of promotional material to drum up interest from investors and audiences. It was a great chance to really flex my creative muscles and get into some good ol’fashioned doodling. My favourite piece to come out of this one was what I nicknamed the Lady Briton sketch, so I decided to run a quick step by step tutorial for anyone interested in how I took this illustration through from brief to final concept.
So the brief for this character went something like this (and this is me paraphrasing pretty extensively)-
“she’s a feisty female Briton, easily equal to her male counterparts, she get’s captured early on in the film so it’s important to try and get her fighting spirit across in the design as much as possible. Also- she is the only female in a movie full of dudes, so she really needs to not be a troll.”
After a bit of pleading, Patrick (the director working on the film) also sent me through this rough sketch he’d put together. It makes such a difference getting some rough input from a client as it means I have a starting point- even the crudest stick man helps me to get a result closer to what they originally envisioned. Anyway – from this, I gathered she needed to be in pretty light armour, probably leather or cloth and covered in dirt. Nice.
The next step is getting a rough sketch together. My initial sketches are always pretty awful (I think I drew this one whilst on a bus in Spain?), but the point of them is very much like the concept Patrick sent me: to quickly get an idea across. If you spend any massive length of time on them, then (if you’re like me) you’ll resent any changes that need to be made, at the end of the day: time is money after all. In this version, Patrick could see I’d gone for a cloth wrap that showed off more skin in a way that wasn’t too obviously sexual, and made the hair very loose, long and straggly. I also gave her two swords, but Patrick felt that a crude sword and shield might work better, so we went with that.
The developed sketch turned out like this. I tried to stay aware that whilst this character needed to be feral and wild, she also had to be quite attractive in her own way. To keep that appeal in there, I pretty much sketched her naked outline and started adding clothes after so as to keep that core feminine silhouette to the design.
Once that got approved I moved onto inking- I ink right on top of my pencils, but I always make sure to have a scanned copy at a decent resolution just in case I slip up. A lot of top inkers recommend brushes to help you get a good line weight into your artwork, this can make your drawings a lot more dynamic and it really helps to give a sense of depth. Originally I just used digital inking via my Wacom tablet, but at my first comic con in Boston, a few editors from DC comics tore my portfolio apart, saying I had great talent but I really needed to use brushes to ink my work. Since then I’ve tried my best to use brushes, but as with all things it’s easier said than done and I ended up ruining a few sketches with spilt ink pots and the like. Now I’ve found a happy medium in the Pentel Brush Pen- which is what it sounds like; a pen with a brush nib. I think it’s designed for Chinese calligraphy or something, but to my mind, there is no better pen out there for inking your artworks (at least for the major lines anyway).
So now my inks are nailed down, it’s time to erase the pencil underneath and get the inks scanned into Photoshop. I use the Levels Tool (Ctrl+L) to try and clean up my image a bit and get rid of any paper grain. Basically I just move the black and white cursors a little closer to the centre until I’m happy with the definition I’m getting. It’s useful to zoom right in here to make sure I don’t have any pencil trails still knocking about. A trick I sometimes also do (but not for this piece) is run my linework through a Live Trace in Illustrator, then just save it as a PDF and open it back up in Photoshop. This can really help smooth out my lines and can make a huge difference if I’m going for that ultra polished look.
For colour I generally duplicate my line layer and set the top one to multiply. For the lower level I go to Select > Colour Range and choose black to select all the lines. Then Select > Modify > Contract and contract by one pixel. Now I invert the selection and delete. This means that the lower layer (which will become my colour layer) has slightly thinner lines than my top layer. This way I can just use the paint bucket tool on my lower level to quickly fill the areas I need with colour. The downside of this is that the lines on the lower layer are now very jagged, but fear not- that top layer is still perfect and will keep the ultra smooth lines. Smart.
Shading wise I do love my gradient tool, but I’m trying to broaden my horizons and so, with that in mind, for this piece I decided to use Copic Markers. Now I’m no pro with these things yet, but I’ve seen some amazing artwork from guys like Adam Hughes and Mahmud Asrar, so I figure it’s well worth my time getting to know them. They’re basically watercolours in a pen minus the mess (are you seeing a pattern here?). Seeing as I wanted this piece to be really gritty, I figured it didn’t matter too much if I wasn’t perfect yet as it’d probably add to the effect I was trying to achieve anyway.
So here’s how I work- I go back to my inks in Photoshop and place a ‘screen’ layer over them and fill it with Non Photo Blue (#A4DDED – thank me later), this changes all my inks to a special type of blue that is really tough for scanners to pick up (meaning the lines won’t show up as much when I scan it back in and I’ll just have my sexy Copic shading). I print this out and then start going over it with the Copics. I only use grey as I already have my basic colours in Photoshop. Copics have two types of grey- warm and cool. Warm is generally for skin and ‘warm’ things, and cool for clothes and ‘cool’ things (duh!), however, for this character I really wanted to make her as pale and cold as us Brits really are and so I swapped them over, using cool greys for the skin and warm greys for the clothes. This contrasts well with the olive skinned Romans I illustrated later.
So the technique I use is just to start with my lightest colour and keep adding until I’m happy. I apply each colour a few times to get really slight gradient differences and then switch up a pen for more defined shadow and light sections. Another cool tip is don’t worry about going outside the lines- we have our perfect inks saved on Photoshop now, so if needs be we can always use that as a mask to clean things up.
Some other gadgets I have are these Sepia pens. Again, these come in warm and cool greys. They’re not quite as washy as the copics but they have a much finer nib and are great for detail.
I use these for any sections that need real precise details like on the leather strips or strongly defined shadow. They’re great for hair as well.
Finally I have a couple of white ink pens for highlighting any areas. Generally I like to do this digitally as these inks can run a bit, but sometimes it can be helpful to get the whites in whilst I’m ‘in the zone’ and am pretty familiar with the illustration and lighting etc…
Now for the fun part; get the Copics scanned in and throw them into Photoshop.
I grey-scale them up with Ctrl+Shift+U to get rid of any colours that have shown up (or not if I like the effect, I call it as I see it depending on the illustration).
I put this layer above my colour layer (but below my smooth ink layer) and set it to multiply. What I’m left with is my digital colour mixed perfectly with my Copic shading. Sweet.
Now is the time to take a good look over the illustration. I often notice some bits I want to be darker or lighter. Not to worry though, I just hide the Copic layer and start editing my original colour layer. I wanted the eyes much darker and I think I wanted the clothes to cast more of a shadow too, so all I did was highlight those sections and darkened them with either the Lightness Bar on the Hue/Saturation Panel (Ctrl+U), or with the Gradient tool set to black.
Likewise I wanted to brighten up a few sections, like on the sword, so I did the same thing but with white. When I’m creating a glow or a shine, I make sure to do it on a new level above my smooth inks, stuff like this really helps blend a work of art and brings a piece together.
I know what you’re thinking- “this chick is way too clean, where’s all the mud we were promised?”. I know, and I’m way ahead of you. I have this great texture in stock from Go Media Arsenal Grime Set 2 pack, I think it’s actually concrete, but it works really well for adding a natural, dirty looking texture to things. Normally when I’m working with textures I like to desaturate them so they taken on the colours of whatever layers I apply them to, but in this case I thought the bluey grey colour worked pretty well (having flashbacks to Braveheart!) so I decided to keep it as is.
To apply the mud effect I simply throw it on above the colour layer, delete any part that isn’t over the skin and set the layer to multiply- this ensures that all the dark bits of the texture stay dark whilst the light bits show through the skin colour underneath. After that it’s just a case of playing with the opacity to get the muddiness to a level I’m happy with, I think I opted for around 50% opacity in this piece. Another cool trick I do here to add a bit of depth and volume is to select the erase tool and a really soft brush with a low opacity and just go to work erasing bits of the mud texture on the parts of the skin that would be either naturally lighter or catch the light (since the mud layer is set to multiply, and only the dark bits are showing through, erasing them will make that area lighter). In this case I erased around the shoulder and hips, as well as on the top of the thigh to make those areas seem a bit more rounded and curved.
Now the brief asked for a character illustration and didn’t really mention anything about backgrounds, but I work to the Bill Beachy mantra of “under promise and over deliver” so whilst not going overboard I am going to try and produce a background that’ll help set the tone for this illustration. [Note: Bill Beachy is also the mastermind behind the best web design firm in Cleveland, Go Media.] The basis for the background is very simple. Another texture from Go Media’s Arsenal, this time from the Rust 3 set with a blue tint and a black gradient coming in from above. I’ve also included just the hint of a pattern from the tribal vector pack in order to make that background a bit more dynamic. Also since the illustration is for a movie called ‘The Northern Mist’ I figured it’s probably a safe bet to put some mist in there too. This is basically created on a layer above the background (but behind the character) by using some of the sexy Smoke and Cloud textures from the Arsenal. I use a few of these mixed together and set the layers to ‘screen’ (removing any blacks from the texture and just showing the white misty goodness), this gives a sense of volume to the mist in a very authentic (and quick!) way.
To add a bit of depth and to create a foreground, I duplicated the mist layer and moved it above the character illustration to give the appearance that my Lady Briton was stood amongst the mist rather than in-front of it. I also added a bit of light in the top left corner to help show off a bit of light direction and some cheeky dust particles to make the light look a bit more dynamic and to add extra depth. One last cool little trick I did here was to put all the character layers in a group (Ctrl+G) and then apply a gradient mask to that group from the ground up, effectively fading out her feet. The result of which made her look as though her feet were disappearing into the mist, but still allowed me to keep the mist fairly fine.
So there it is, my finished Lady Briton illustration. Patrick and the guys from Cohort Pictures were really thrilled with how this, and the other illustrations turned out. In fact, they even hired me again right away to produce a short comic book in lieu of the traditional storyboards, so that they could use it as a marketing tool for the film!