byu-idaho comm 130 - reed crouch

21
REED CROUCH Portfolio

Upload: reed-crouch

Post on 01-Oct-2015

68 views

Category:

Documents


0 download

DESCRIPTION

A collection of 9 design projects created as part of the COMM 130 Visual Communications course at BYU-Idaho. The course covers the main principles of communicating visually through print and online means, including color, contrast, repetition, message, simplification, proximity, gestalt, unity, and others.

TRANSCRIPT

  • REED CROUCHPortfolio

  • Reed Crouch1189 Ashborough Dr, Apt. MMarietta, GA [email protected]

    Contact

  • Event AdPhotodesignBrochureLogosWeb PageStationeryBusiness CardFlierMontage

    Table of Contents

  • Event AdDescription:An event ad intended for nutrition directors in school districts to get to know their local growers and their products.

    Date: 1/27/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Microsoft WordAdobe Acrobat CCNikon D3200 DSLR Camera; 50mm lens

    Objectives:Comprehend image sizing (how pixels and inches work together). Find, scan and import a high-quality image. Create a full-bleed design. Choose a color scheme and typeface(s) that work for your message and audience. Learn to use only Word design features without using any Adobe programs, including Photoshop.

    Process: The challenge for this assignment was to do many things I would normally do in InDesign or Illustrator, in Microsoft Word, including full bleeds. Took a photo of an old wooden crate and sized it for the full paper width at 150ppi. I sized a section of the wooden crate image to become the background for the Registration URL at 150ppi. Copy text was prepared so I only fine-tuned the message and reduced the copy. Using a paintbrush style font, I used this for the main titling and repeated it in the registration URL. I extracted the orange, light green and dark green from the Georgia Grown (Georgia Dept. of Agriculture) official logo to use it in the date, location, and contact name. The tetradic color model in this ad is well represented in the stock image used at the bottom. White space was retained on the right side, offsetting the main body copy from the Georgia Grown logo. Unity is achieved between the logo and the farm image at bottom. Unity is also shown in the date and registration URL. Repetition is found in the two wood crate background images with whitewash font. No widows or orphans are found. A light drop shadow is found below the two wood crate images.

  • Joinus at the FarmtoTableSourceShow foran opportunity to introduce your GeorgiaGrown products to schools, universities andcampsfromacrossthestate.

    February26,2015AtlantaStateFarmersMarket16ForestParkwayExhibitHallForestPark,GA30297MistyFriedmanFarmtoSchoolCoordinatorGeorgiaDept.ofAgriculture4048595029

    REGISTER: GeorgiaGrown.coM

    Georgia Grown Farm-to-Table Source Show

  • PhotodesignDescription:A personally taken photograph that has been edited/formatted using Adobe Photoshop CC to create a poster.

    Date: 2/3/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Nikon D3200; 200mm Nikor lensA single medium wattage incandescent lampAdobe Photoshop CC

    Objectives:Learn basic photography skills. Choose a color scheme, take a photo to match those colors, then incorporate the colors into the layout. Use a digital camera to take a quality image, then download it. Adjust image levels, saturation, color balance, sharpen tool on separate layers for NDE (non-destructive editing.) Size and crop the image, then place on an 8.511 page layout. se layers to design text, and repeating graphic elements in Photoshop. Print with full-bleed margins. Trim only 1/8 (0.125) from all four sides.

    Process: Strictly Adobe Photoshop CC was used. An original photo I had taken was placed on the background layer with level, vibrancy, sharpness and selective color adjustments were applied. I researched 1920s era fonts and styles and picked one that was appropriate for the design. I chose the Split Complementar color scheme based on the predominant colors in the background photograph and shades. I applied the Color Burn filter to a vertical bar to produce additional colors to help the body copy text to pop out more. The inset with white border down in the bottom left corner shows the original unedited photograph of an upright piano.

  • BrochureDescription:A two-sided duplex brochure printed by 4-color digital process.

    Date: 3/24/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Adobe InDesign CCAdobe Photoshop CCAdobe Illustrator CCMS Word 2010

    Objectives:Set up and align a two-sided, folded document. Create an original, new logo and use it in a brochure. Incorporate quality images. Incorporate at least four quality images, not including the logo. One should be clipped in Photoshop and text-wrapped in InDesign so the text follows the cutout shape of the image. Write at least 250 words of original copy in at least three paragraphs, headers, and subheaders. Trim for a full bleed and print in duplex (two-sided) color.

    Process: I created the concept for a fictitious Smartphone app, the logo, and the prod-uct applications. I created the logo in Adobe Illustrator CC and one of several variations. I illustrated a 2D Smartphone and saved two colors: red and blue. Each had a persons face on its display using a compound mask. A gradient was applied to the face using shades. Buttons and a speaker were added using the rectangle tool and rounded corners. A transparent white panel was used to make the logo show up well. A dashed line indicated where a die cut would make the Smartphone protrude above the cut line.

    The logo features a spinner with a red dot and used repetitiously throughout the brochure. An outer glow was applied so it would stand out more. The spin-ner represents collaboration. A thin white line was drawn to connect the Smart-phone, visually, to the large spinner and the logo spinner.

    A blue smartphone was placed on the inside panel on the left side. Body copy was written and a text wrap applied around the Smartphone. A strong heading was applied over the body copy text. An image of a man holding a Smart-phone was cut out with a mask using Adobe Photoshop CC. On the right, three high resolution images suggest the negative aspects of traditional meetings. A thin line with arrows connects them to the man with the Smartphone and the blue Smartphone above. The product logo was placed again on the right inside panel and on the back to repeat the product name.

  • LogoDescription:Three variations of logo designs for a fictitious design company to choose from, based on various typefaces, colors, color schemes, shapes, illustrated elements, and symbolic/iconic values.

    Date: 2/17/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Adobe Illustrator CC

    Objectives:Create three completely different, original logos to fit a company or personal image that will appeal to the audience. Do not imitate existing logos or use pre-vious designs. Use only Illustrator tools to create and draw your logos. (No Illustra-tor pre-fabricated flares, symbols, etc.. No photos or live-tracing. You may use an image or drawing as a guide to trace it with the pen/pencil, but delete the image before submitting.) Gather opinions from at least ten people about which logo appeals most to them.

    Process: All three logos were created in Adobe Illustrator CC and required knowledge of different font faces and attributes, color schemes (complementary, split com-plementary, monochromatic), repetition, color psychology, vector drawing skills such as working bezier curves and primitive shapes, effects such as 2- and 3-point gradients, and the value of repetition in design. These were applied to each logo with the intent of arriving at three very different logos.

    The basic process was to seek inspiration from other logos I had seen, my own original ideas, and experimentation to achieve the three designs that the com-pany could use from. Having approached it this way, the client could choose a favorite from which I could improve on the process to arrive at the best possible design. A survey was taken to get more opinions on the ones people generally liked and I used their feedback to improve the designs.

  • Web PageDescription:A web page coded in HTML5 and CSS3 for a fictitious design businesss logo with an explanation of how the logo design was created.

    Date: 3/10/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Notepad++ code editorFirefox browser with Firebug plug-inChrome browser with element inspectorW3 Schools HTML5 and CSS3 code validators

    Objectives:Size and optimize an original logo as a .png for a web page so the long side is 300 500 pixels. Write content to describe the process of creating your logo and how it appeals to a target audience. (Minimum of 200 words. Include ratio-nale for colors, appeal to target audience, design skills, etc,) Acquire a work-ing knowledge of HTML. (Include all required tags Doctype (provided), html, head, title, meta charset (provided), body, h1, h2, p, ol or ul (with li tags), img, br, and a link to blog) Acquire a working knowledge of CSS. (Customize the provid-ed CSS provided to format the HTML to complement the logo design. Change at least the following: The h1 text color & h1 background color, font colors for the paragraphs & list items, the background color, font families and add at least one css comment.) Identify hex colors to match logo, using Photoshop color picker.Open the HTML page in a web browser and capture a quality screen shot with .5 inch margins for printing.

    Process: Using Notepad++ for code editing, I modified the basic HTML5 and CSS3 code provided to create a completely different layout and design. I used Adobe Pho-toshop CC as a tool for picking the colors from the business logo. First, I wrote my content explaining the process of the logo creation. Then, I experimented with different color fills for the HTML, body and H1 backgrounds and text colors. Then, I styled the web page further by applying a CSS3 drop shadow to the H1 text, increasing padding to align it to the center it, thickening the solid border around the body area, and making the body width adjustable according to the width of the browser window. After the HTML5 and CSS3 code was finished, I validated it through W3 Schools code validator and corrected errors as needed.

  • StationeryDescription:A stationery design project using a fictitions marketing company. Includes letter-head and a business card with social media icons and QR code.

    Date: 2/24/15

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Adobe Illustrator CCAdobe InDesign CCAdobe PhotoShop CC

    Objectives:Use the basic tools in Illustrator & InDesign. Create a new logo to fit a company or personal image. Do not imitate existing logos or use previous designs. Dont use photos or live trace. Use the new logo to design consistent layouts for a business card and letterhead. Photos are okay on business card and letterhead as additional design elements. Letterhead should be 8.5 x 11, full-bleed optional, but trim only .125. Business card should be 3.5 x 2 and printed above center on a vertical page. Apply typography rules, keeping small copy. Keep designs simple with light watermarks and drop shadows and plenty of white space. Include contact information: name, address, phone, website, and email on each piece. Use periods, bullets, or spaces in phone number; no parentheses/ hyphens.

    Process: I designed a companys logo in Adobe Illustrator CC, modifying two characters (W and E) from a rounded font and applied a gold effect to simulate gold foil (which will actually be gold foil stamped into the accompanying business card). The logo has the tagline energize your vision in a way that suggests the companys main business: helping companies to breathe life into their marketing vision. Underneath the tagline is a chalk style underscore or brush stroke.

    Using Adobe InDesign CC, I created letterhead at letter page size with a dark brown masthead, a curved bottom edge, and a bleed trim at the top and sides. The company logo was inserted on the right side and centered vertically. A large watermark of the WE from the logo was placed in the body area on a one-third grid line with its opacity set to 7%. The companys contact information spans the footer area and a long brushstroke below it to create repetition with the brushstroke in the logo at top. 100% color was applied to these elements which are a medium gold-brown.

  • WE energize 4321 Elm St., New York, New York, 54321 m: 321.432.4321 o: 321.432.4322 [email protected] WE.biz

  • Business CardDescription:A business card design that matches the letterhead previously introduced in this portfolio, using a personally-created logo.

    Date: 2/24/15

    Course/Instructor:Comm 130 Section 15Julie Peterson

    Program(s)/Tools: Adobe InDesign CCAdobe Illustrator CCQR code generator: goqr.me

    Objectives:Create a new logo to fit a company or personal image. Design consistent lay-outs for a business card and letterhead. Use the basic tools of Adobe Illustrator and InDesign.

    Process: The business card was created using Adobe InDesign CC on the second page of the letterhead and centered horizontally above the center horizontal line on the vertical page. The gold foil effect of the logo and the card owners name are shown with a gold effect gradient to simulate the gold foil. The contact infor-mation is right justified with its left side intentionally curved to lead the eye from the card owners name down to the logo below. A QR code was applied on the back side of the card with the WE part of the logo and social media icons vertically stacked. The QR code was generated by a service at goqr.me where it allows you to configure a border, resolution, and various types of QR codes. This one was created using their vcard option. The QR code and social icons are not foil stamped rather they are inked with a medium gold-brown.

  • REED CROUCHDir. of Digital Marketing

    [email protected] WE.biz4321 Elm St. New York, NY 54321

    mobile: 321.432.4321 o ce: 321.432.4322

  • FlierDescription:A flier intended for graduate students to enhance their leadership preparation and skills for business.

    Date: 1/20/2015

    Course/Instructor:Comm 130 Section 13Julie Peterson

    Program(s)/Tools: Adobe InDesign CCAdobe PhotoShop CC

    Objectives:Apply the design principles and use appropriate typography. Incorporate basic InDesign skills to improve basic flier layout. Retrieve image and logo from links on this page. Create a project folder with image, logo and InDesign document to keep links in InDesign intact.

    Process: After creating four sketches, the client selected one and I began creating the layout in Adobe InDesign CC. I flipped the focal point, horizontally, so the faces of the people in the photo were pointing inside the frame. Using Adobe Pho-toshop CC, I feathered the photos left edge to remove the hard edge so flow would improve from the title to the focal point (the photo) and lead-in question. The flier title runs along the left side, rotated 90 degrees. The word Leadership was bolded in a serif typeface and placed on a gray box in upper case with wide leading applied to extend it to the top and bottom of the gray box. A low-er case sans serif font was used for the other title words. Smaller gray boxes were used for repetition and include registration and date/time/place. All text was set and centered with adequate border around them to balance the type visually against their backgrounds.

    With the main focal point being the bold photo of students, a bold bar was used for the lead-in question and offset from the rest of the body copy, over the focal point image. The rest of the body copy was then given a sans serif font and full justification applied except on sentences that were ragged or where orphans or widows landed. These were given full justification with the last lines left justified. To improve white space, and to make the blocky design more visually interest-ing, I inserted a white space triangle at the bottom and applied a text wrap to the body copy to lead readers eyes to a reduced size logo. The triangular white space at the bottom (roughly) corresponds to the angle formed by the students heads in the photo, leading the eye to the logo.

  • Come learn how at Vouant Communications annual Graduate Leadership Conference.

    Vouant Communications is devoted to helping tomor-rows leaders gain essential leadership skills in the workplace. During this dynamic three-day seminar, attendees will meet with top executives of Vouant Communications to dis-cuss breakthrough leadership techniques, while cultivating attributes of leadership that will market to

    any employer.

    Conference is available to graduating seniors. Space is limited.

    grad

    uate

    conf

    eren

    ceLEADERSHIP

    Regi

    ster

    : w

    ww

    .Vou

    antC

    omm

    .com

    /Le

    ader

    Oct

    ober

    21,

    8 a.

    m. -

    5 p

    .m.

    L

    inco

    ln C

    onve

    ntio

    n C

    ente

    r

    Do you want to have the competitive edge in business?

  • MontageDescription:A montage that suggests the spiritual and temporal principles associated with organization, preparation, and establishing a house of prayer, using two or more high quality photographs and non-destructive editing techniques.

    Date: 2/10/15

    Course/Instructor:Comm 130 Section 130Julie Peterson

    Program(s)/Tools: Adobe Photoshop CC

    Objectives:Use the FOCUS design process with strong focal point and flow. Unify a layout with a consistent theme and dominant spiritual message. Learn to blend two or more images together gradually, using masks. Demonstrate more advanced Photoshop skills for layout with multiple elements. Use a mask to apply a filter to one part of the image. Apply typography principles (titles, quotes, events or scripturesyour choice). Format type: Legibility; Small copy & Title with varying text size. Use theme words and select good quality images.

    Process: After locating several potential high quality images, I placed them on various layers in Adobe Photshop CC , positioned and scaled them for possible inclusion. Priority was given to images featuring predominate colors in the big split comple-mentary color scheme. Some images were flipped to add to the circular flow seen in the final piece. Using masks, each photo was carefully edited to blend with adjacent and background images. Vibrancy and Selective Color was ap-plied to enhance color. Type for the scriptural quote was placed at the top to lead the eye from the beginning of the circular flow. Red and white were ap-plied to the text, matching colors found in the house below the words house of prayer. A slight drop shadow was applied to the keywords: Organize, Prepare, and Establish. The background image with the blue sky was enhanced using an orange fill on a separate layer behind the scriptural quote with the Dif-ference blend applied, causing the sky to become a vibrant blue.