Face Drawing

One of our very first assignments in illustrator was to create a face drawing illustration of ourselves. Personally, I don’t even like having my photo taken but this was such a great lesson on how to use the tools in illustrator to create a realistic illustration.  I learned so many new things while working on this assignment, brushes, patterns, shades, effects and layers are just the start. We basically learned how to take an actual photography, posterize it in photoshop and turn it into an illustration in illustrator. It’s a little bit creepy but pretty neat in the end, it kinda actually looks like me. Once we were finished with our illustration we were asked to select a color harmony that suited the mood of our portrait, mine was mostly within the blacks. haha.

Image Trace & Live Paint

Today in illustrator class we learned how the image trace and live paint features work.  Such incredible tools, they allow you to trace out images or sketches into vector shapes. With fine tuning options under the Image Trace Options panel, you are able to play with paths, corners, noise and threshold option to adjust your image to the way you see fit. You also have the option of black and white, grey scale or color when image tracing your file. It’s a pretty neat feature to have when wanting to scan in your sketches of logos or type you’ve created.

Live Paint offers unprecedented ability to affect color in an entire illustration dynamically-rather than fill objects with various colors, you can now drag sliders and watch the colors in you illustration change as you drag. The color guide uses harmony rules, which are based on color models with complementary colors, to help you select colors for your illustration that work well together.

Here is an in class assignment we did to understand the process of these tools.

Revised – Composite – American Express

Client

The American Express Company, also known as Amex, is an American multinational financial services corporation headquartered in Manhattan’s Three World Financial Center in New York City, United States.  Founded in 1850, it is one of the 30 components of the Dow Jones Industrial Average.  The company is best known for its credit card, charge card, and traveler’s cheque businesses. Amex cards account for approximately 24% of the total dollar volume of credit card transactions in the U.S.

BusinessWeek and Interbrand ranked American Express as the 22nd most valuable brand in the world, estimating the brand to be worth US$14.97 billion.  Fortune listed Amex as one of the top 20 Most Admired Companies in the World.  The American Express Reward program is unique as it works on a more personal level with members to help create experiences.  Added value to the brand comes from the affluent nature of their history and the exclusivity of their products.  Anyone can get a credit card but only a select few can get an American Express.

The company’s logo, adopted in 1958, is a Centurion whose image appears on the company’s travelers’ cheques, charge cards and credit cards.

The Ad Campaign will focus on informing the reader to Realise The Potential when using an American Express credit card.  The overall feeling and mood for this campaign will be true to the brand identity, with a modern, simple design that outlines some of the rewards in a creative and playful style.

Target Audience

The primary target audience for this ad campaign will be both male and female between 24-30 years of age.  They are well educated, young professionals.  They live in urban cities around the world.  They may have a minimum income of $40,000.  They enjoy going out on the town, seeing concerts, going to sporting events, traveling to and shopping in beautiful vacation destinations.

Magazine

Vanity Fair is a magazine of popular culture, fashion, and current affairs published by Condé Nast.  The three ad’s will run in individual issues throughout the summer months of June, July and August of 2016.  The ads will run during the summer months because of the warm weather, which allows people to take more time off for vacations and will be able to do a lot more during that time.

Design Strategy

My design strategy was to create three ads that visually worked together and as an individual print ad.  I wanted to create something visually appearing to the reader.  I used illustrator to create objects that portrayed a message in each ad.  The use of a black background with red and gold objects grabs the readers attention even while flipping quickly through the magazine.  The type used is clean and easy to read and the use of white and yellow colors makes it stand out from the background.  The company logo and credit card were found from online sources (brandsoftheworld.com and Google)and were added to the print ads to inform the reader who the ad is for and where the reader can join to become an executive member of the program.

(Below are some sketches and ideas I had while researching for my ads)

Concept

The main theme of the Ad Campaign will be to entice the reader that they can to do much more when using their American Express credit card.  With the American Express tag line written on each ad in white, “Realize The Potential” the reader will imagine all the rewarding possibilities of using an American Express credit card.  A website address will also direct the reader to the companies online site to apply for membership if not already a card holder.  A sleek and simple design that gets the message across quickly yet visually appealing.

First Ad
The first ad is on a black background with an illustration of a pair of red VIP tickets in the middle of the page indicating that being a member gives you the chance to get exclusive tickets to private events. Tag line reads, “Realise the potential”.  Along with an American Express credit card, logo and website, that informs the reader of further information.  The font is white to contrast from the dark background with the website being yellow which also stands out from the background and ties to the design colors.

Second Ad
The second ad is on a background with an illustration of a red carpet and velvet rope lines entering into a door indicating no line ups to red carpet events.  The tag line reads, “Realise the potential”.  Along with an American Express credit card, logo and website, that informs the reader of further information.   The font is mostly all white to contrast from the dark background with the website being yellow which also stands out from the background and ties to the overall design colors.

Third Ad
The third ad is also on a black background with an illustration of two red exclusive front row seats indicating to the reader that being a member with American Express you have the possibility to get front row seats at a concert, event or even a private show.  The tag line reads, “Realise the potential”. Along with an American Express credit card, logo and website, that informs the reader of further information.  The font is mostly all white to contrast from the dark background with the website being yellow which also stands out from the background and ties to the overall design in all three ads.

The use of simple red and gold objects on a black background will be eye catching to the reader.  The color red is very well known to be attractive to the human eye.  The use of illustrations ties to the American Express brand which allows it to be simple and playful.  With white text written on the ad, the message will stand out to the reader making it very easy to read and understand the overall message being portrayed.

Challenges & Solutions

I decided to do my three ad campaign all in Adobe Illustrator.  The challenge for me was to be able to design three ads only using illustrator, a software that is not familiar to me.  I’m more of a Photoshop guy and I wanted to really challenge myself with new software and techniques.  I found some of my challenges to be creating realistic objects for my ads.  Creating gradients that looked like chrome and using shadows to make some of the objects believable and realistic.  Learning how to create an object and playing with the blending tools, perspective tool and mastering the pen tool was quite a challenge but I feel I created something that worked well and sells the product to the reader.  Once I had all my objects drawn I needed to make all three of them uniform.  By doing that I needed to resize all the tag lines, logos and objects on each individual ad to fit into the page outline provided by the magazine’s print specs.

The Pitch

I feel that my ad campaign will be successful because it’s simple, clean and pops off the page.  The reader only has the attention span of around three seconds when flipping through a magazine. So the use of bright red objects on a black page would work well to catch the readers attention.  I feel the reader would really care about this product because who wouldn’t want to feel like an exclusive member of something.  My ads sell an experience to the reader, an experience that they may not get to experience with other credit card companies.  Exclusive tickets to the hottest party in town, premier red carpet events and even front row seats on Broadway.  An experience of a lifetime!

Realise The Potential with American Express.

Nuit Blanche

Our final assignment in Typography class was to create a poster for one of three categories, Nuit Blanche, WordCamp or Fringe Festival.  I decided to create a poster for Nuit Blanche.  I wanted to create something that would stop someone in their tracks and have a long look at the poster.  Here’s my break down of the poster. I hope you enjoy!

Target

My target audience for this poster are both male and female age 25 and up. Although this event is open to everyone, I feel it attracts to young professionals. People of all kinds flock to this event to get inspired and explore the wonders created by artists from around the globe. I think that this poster stands out to the target audience because the punch of color used is striking to the eye. The graphics encourage the audience to expand their minds into their personal creative wonderland.

Design

I wanted to create something that not only opens the mind of the viewer but allows them to think creatively before attending the event. I found a silhouette of a dear and dropped a hi res file of nebula onto it and blended the two to create a spacey looking creation of a dear lost in the dark woods; much like the audience will feel wandering the streets surrounded by skyscrapers. With the use of the original Nuit Blanche logo design, I removed the font, kept the swirl and also dropped another image onto it to make it look like a web of explosive imagination was going on in the mind of the dear. The colorful flying origami birds add to the poster because it looks as if they were the ones responsible for the tangled swirl above the dear. The font used was Permanent Marker which I think was a great choice because it reads well, looks good for a bold title and with minimal text on the poster. Supporting sponsors are included at the bottom with their respective logos.

Hierarchy

I wanted to emphasize the most important element of the poster: the what and where. Anyone who catch- es a glimpse of the poster will immediately understand it’s for Nuit Blanche. The exhibits at Nuit Blanche cover a huge range of disciplines and I wanted to use the infinite depth of the universe to convey this. Dear are known to be both magical and spiritual creatures so I think it’s fitting to have this dear silhouetted while supporting the recognizable Nuit Blanche swirl design. The dear is flanked by modern origami birds that also represent the intricacies of exhibits at the show, both large and small. The bottom of the poster includes the website (for more information) and sponsors in a clear and flattering way. As the viewer will most likely only see the poster for a brief moment, I believe that they will easily understand and remember the most important details and be left with a sense of intrigue and excitement at the possibilities waiting for them.

Protected: Ad Campaign Proposal

This content is password protected. To view it please enter your password below:

Password:

BELMONTE RAW

It looks like the juice craze and a lifestyle of healthy eating is going strong up in Canada. Belamonte Raw is a Canadian based delivery service that specializes in raw, organic juices and foods. Founded by the company’s namesake Carol Belamonte, the company grew fast and quickly outgrew its original brand identity.

“Over six years ago Carol Belmonte launched Belmonte Raw by bringing salads via bicycle to hungry office workers. At the time of their inception, there were no organic places offering what Belmonte Raw was creating.”

Designer David Taylor was the man for this project. He saw the need to create an identity that differentiated the premium quality of Belamonte Raw’s products from the rest of the playful juice branding in the marketplace. Taylor designed a monogram of the company initials with the name typset below in an all caps, san serif font. This combined with a black and white color palette created a clean, classic brand foundation.

“A paired down palette allowed the color of the food to shine and communications were lead by brand statements that brought the product to life.”

Juices and cleanses are a large and important part of the company’s product line, so there needed to be a relatively easy solution to differentiating the different flavors. Each clear glass bottle has the company’s name screen printed on it for consistency. Wrap around labels are then placed on the bottles with juice name & ingredients being customizable.

Of course bright orange carrot juice is easy to spot, but it’s not so easy to figure out the difference between all the shades of green. This was solved by placing a large number onto each label which correlates to a description on the menu. “I’ll take the #5 please.” I love the order by numbers because it’s easier philosophy in life!

A final, almost overlooked, design element which Taylor included was an underline beneath the letter “E” in Belamonte. This emphasized the fact that the “E” should be pronounced, rather than silent. It also created a tool for brand enlightenment and then was integrated into other areas of the design work. A little goes a long way with this well-developed brand identity, the consistency throughout the packaging and all other touch points of customer facing materials is impressive. Nice work Mr. David Taylor!

Designed by Awake Studio Country: Canada

Originally posted on: thedieline.com

 

 

Share this:

Share this:

The mind is everything. What you think you become.  –Buddha

HTML & CSS

As part of the Graphic Design For Print and Web program at Humber College, we have a web development class.  Learning coding in html and css are the building blocks of creating any website.  The only experience I’ve ever had creating a website was for my own professional photography portfolio (www.marekszkudlarek.com) and I used Adobe Muse.  Learning code at first felt like I was learning a whole new language.  I guess it is in a sense, it’s completely  overwhelming and a ton of information to take in at first.  But once I started to understand it, it all came together.  It helps to do some research online and here are a couple great links if you ever want to learn for yourself. w3schools and Codecademy

Click here to see my first attempt of creating an actual website using only code!

Here I am going to break down the building blocks for html and css for future reference.

Introduction

Web pages are created using HTML and CSS. What do these languages do?

HTML is used to establish a page’s structure. It also lets us add text, links and images.

CSS is used to control the design and layout of the page.

HTML elements

HTML elements are the building blocks of web pages.

The web page below is made up of a collection of HTML elements. Each element is outlined in blue and labeled with its name.

HTML elements describe each piece of content on a web page so that the web browser knows how to display it.

The next few cards will cover five common HTML elements.

Heading elements

Headings are described by heading elements. There are six levels of heading elements: h1 to h6.

The h1 element is used to describe the main heading of the page.

<p>

Similar to a news article or a word document, headings in a web page are usually followed by paragraphs.

In HTML, paragraphs are described by paragraph elements, or p elements.

<a>

The defining feature of the Web is the presence of links. Clicking on links leads to other web pages. The a element is used to create links.

The a element is similar to the h1 or p elements, but it has two key differences:

First, it has an href attribute which equals the website you want to link to.

Second, you get to choose the link text that users see on the page.

<img>

In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.

The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the image.

<ul> and <li>

In addition to paragraphs and images, content can be presented as lists.

In HTML, a list made with bullets is described using a ul element. Each item in the list is placed inside an li element.

<html> and <body>

Here’s an example of a real web page:

Everything inside a web page is nested inside the html element

The body element contains the actual content of the web page – everything nested inside <body> and </body> shows up in the web browser

The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn’t have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.

Introduction CSS

Web pages are created using HTML and CSS.

• HTML is used to write a web page’s content.
• CSS is used to define the design and layout of the page.

A web page is a collection of HTML elements. CSS is used to control the appearance of an HTML element.

The code below specifies that h1 elements be colored red. This code is called a CSS rule.

CSS Rules

CSS uses rules to style HTML elements. Here’s how CSS rules work:

A CSS rule starts with a selector. A selector specifies which HTML elements to style. Here the h1 CSS selector selects all h1 HTML elements on the page.

Inside the braces { }, a property and its value define what aspect of the h1 elements to style. Setting the color property to red changes the color of the h1 element to red.

Together, a selector and its property-value pairs are called a CSS rule.

Class Attribute

HTML elements can be CSS selectors, but they’re not the only selectors available. Another available selector is the class selector.

Class Selector

The class can be targeted from CSS by using a dot (.),

The .header selector applies a blue text color only to the elements nested inside

< div class = “header”> .. </div>.

In this way, classes are useful to specifically target groups of HTML elements.

Combining Selectors

It’s possible to be even more specific by combining classes and element names.
This CSS selector selects any p element nested inside an HTML element with the class named header, and colors it blue.

In this way, a CSS rule targets specific HTML elements on the page and applies a style to them.

color

The color property sets the color of an HTML element’s text.

We can use color names to change the text’s color. But this only works for 140 colors.

Instead, we can use RGB values or hexadecimal numbers. They can represent millions of colors. RGB values and hex numbers express colors as different amounts of red, green and blue.

RGB values range from 0 to 255, with 255 being the brightest.

Hex numbers vary from 00 to ff, with ff being the brightest.

font-family

The font-family property sets the font of an HTML element’s text.

Three fonts commonly used with font-family are:

font-family: Arial, Helvetica, sans-serif;
font-family: “Times New Roman”, Times, serif;
font-family: “Courier New”, Courier, monospace;

Google Fonts is a free collection of over 600 more web fonts that you can use on your page.

font-size

The font-size property sets the size of an HTML element’s text.

Text size can be measured in pixels, ems, or rems. We will use pixels here.

Review

CSS uses rules to define the design of an HTML element.

Here’s an HTML element labeled with the CSS properties that control different aspects of its appearance. When you want to style an HTML element, imagine there is a box around it and apply these properties to style it.

We’ve already looked at three properties to control the appearance of an HTML element’s text. The next few cards will cover five more properties that affect the space surrounding the text.

background-color

The background-color property sets the color for the background of an HTML element.

background-image

Instead of a solid color, the background-image property sets an image as the background of an HTML element.

border

The border property sets the width, style, and color of an element’s border

padding

The padding property creates space between the content and border of an element. This white space is useful in order to improve readability and organization of the page.

padding

The padding property sets the padding on all sides. It’s possible to set the padding on each side.

The properties padding-top, padding-bottom, padding-left, and padding-right are available to set the padding on each side of an HTML element.

margin

The margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.

margin

The margin property sets the margin on all sides. It’s possible to set the margin on each side.

The properties margin-top, margin-bottom, margin-left, and margin-right are available to set the margin on each side of an HTML element.

margin

The properties margin-left, and margin-right are available to set the margin on either side of an HTML element. If one of these properties is set to auto, then it will take as much as possible.

To move the HTML element to the far left of the screen, use margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.

To center an element, set margin-right: auto and margin-left: auto. The margin to the left and right will be equal and the element will be centered.

<head> and <link>

Here’s an example of using CSS in a web page:

The head element contains information that the web browser needs to display the page.

The link element tells the browser where to find the CSS file used to style the page. The rel attribute tells the browser that the file being linked is a CSS file to style the page. The href attribute gives the browser the path to the CSS file.

The body element contains the content of the page that shows up in the web browser.

I hope you enjoyed the break down thus far.  I’ll keep adding information as I learn more coding for web design.

What Is A Path? What Is An Anchor Point?

Last week in Illustrator class we were introduced to the pen tool.  Personally, I only scratched the surface of Illustrator for a couple of my own designs projects and I’ll be honest, I don’t think I even used the proper tools for the job.  Somehow in the end I created some pretty awesome artwork that I was happy with.  I’m much more familiar with Adobe Photoshop from the many years of having to retouch models skin for magazine clients and model agencies, cleaning up dust and spots from endless products and designer clothing.

When I decided to take this program I was super excited that I’d be leaning how to properly use software such as Adobe Illustrator and Adobe Indesign.  Software that I’ve been in dire need of learning to further my success as an artist in this constantly changing digital world.  I figured that understanding Photoshop would give me a “one up” on Illustrator and Indesgin and even though the software interface is pretty much the same across all three programs, some tools and structures are somewhat different.  I’m very glad to be coming into it as inexperienced as I am because I have a fresh outlook on the programs and I feel there will be plenty to learn.  I’m even grasping new techniques in my Photoshop class!  Who Knew?

Below is a short breakdown of what a path and anchor point are.  I’ve also added a very cool keyboard cheat sheet for Illustrator that I found online. Feel free to save it to your desktop.

What is a Path?

A path is the black line that appears when you draw a line in Adobe Illustrator. A path is made up of  “anchor points” and line segments between these points. The anchor points on either end of a path have “control handles” and these can be used to control the direction of the curved path.

There are three main types of paths:

1) Open Paths – This is a simple line with two end points.

2) Closed Paths – A closed shape no end points. Ex: rectangle, circle etc.

3) Compound Paths – Two or more open or closed paths.

What is an anchor point?

As mentioned above, each path is made up of a series of anchor points that are connected by line segments. Each anchor point has control handles and control handle lines. The control handles are small squares on the path that allow you to control how tightly or loosely you can bend the curve at each of them. Control handles are tangent lines that allow you to control the direction of the path bend.

There are two main types of anchor points:

1) Smooth points – A smooth point is made up of two linked control handles and help prevent the path from changing the direction abruptly.

2) Corner Points – A corner point helps the path change direction. There are three different types of corner anchor points:

a) Straight corner point – The point where two straight lines meet at an angle is called a straight corner point and do not have any control handles. For example the corners of a rectangle.

b) Curved corner point – The point where two curved lines meet at an angle is called a curved corner point and it has two corner handles. For example the top dip of a heart shape.

c) Combination corner point – The point where a straight corner point and a curved corner point meet is called a combination corner point and it has one control handle which controls the curved line.