Design

Nike Ad
Advertisements

P9 – My Portfolio

  1. Project Corrections / Time spent:
    Brochure – 45 minutes  I changed the photograph on the inside to bleed on the left edge as well as the wave image above that photo. I worked a lot with typography on the inside story. I shortened it and made adjustments so that it would not overlap the fold. I also added color names to the color scheme list.
    Photo Ad – 20 minutes  I reworked the typography
    Web page – 15 minutes  I changed the width of the page and changed the alignment of the footer to align with the web page title.
    Event Ad – 20 minutes  I took off the reflection of the title text and listed the beneficiary of the fund raiser.
    Stationary; Business card – 20 minutes  I reworked the typography; changed the font and made it a little bigger
    Montage – 10 minutes  I changed alignment on the typography
  2. Message:
    I hope that this reflects my hard work and perseverance as I strive for excellence to display my work in a professional manner.
  3. Audience:
    Family, friends, students, collegues (Maybe a potential employer; I have a job, but you never know…)
  4. Top Thing Learned:
    I have learned to design things, elements of good design; mostly confidence in my ability to design
  5. Future application of Visual Media:
    Since I am a teacher already, my main focus was to increase my knowledge and skills and learn things that I can pass on to my students.
  6. Color scheme and color names: Monochromatic; red
  7. Title Font Name & Category: Modern/Decorative; Monotype Corsiva
  8. Copy Font Name & Category: Sans serif; Gadugi
  9. Thumbnails of Images used:
    Susan-Wall-InDesign-Flier SusanWall-P5Logos P6SusanWallrevised revised business card eventadrevised webpagecapture revisedPhotoShop flyer fundraiser revised-page-001FeliciaandJonathonrevisedCatalina Brochurewith bleedsand new picture32Catalina Brochurewith bleedsand new picture3
  10. Sources (Links to images on original websites / with title of site):
    None of my images came from the internet.

 

P8 Brochure Project

Front Panel

frontpanel

inside flap

P8-SusanWall-insideflap

back panel

P8-SusanWall-back

 Page 2 (Inside)

page 2 brochure

 

  1. Description: This is a brochure promoting fun activities on Catalina Island by sharing a little of my experience, specifically riding Segways and parasailing.
  2. Process (Programs, Tools, Skills): I decided to create a brochure promoting fun activities on Catalina Island. I had just been there with my sister and I had some great photos to work with. It would be a brochure that I would really enjoy working on. With that message in mind, I opened up Illustrator and began working on the logo. I created waves and a sun, two prominent elements of our fun day. Then I began designing the brochure in InDesign. I initially used a picture showing a larger sail on the front panel, but the sail was too large for moving it out and sizing larger for the bleed; it would have cut off the top and side of the sail (maybe that would have been okay?) I like the picture that I have now though because it shows the white wake of the water which curves around and down to the brochure title, “Catalina Fun” which creates a nice flow. On the inside of my brochure, I originally had the text on the left side, but it was right next to the Segway panel of text and the tutor pointed out that it was too much text all together, so I redesigned the inside and flipped the image horizontally and put it on the left. I created a “white wave” to separate the picture and the text block which I put on the right side. I decided to edit one of the photos in Photoshop and remove the background so that I could use the sail portion and wrap text around it. I originally put it in the top-middle of the parasailing text block. Most of my critiquers did not like it. During the re-design, I decided to put it in the upper right corner of my parasiling text block, so text only wraps around the left side of it. I think that looks better. I played with my alignment and typography a lot. The tutor told me that my bullets should be aligned with the picture and the heading (I thought that bullets were usually indented?) He also told me that I should align the brochure title/wave combination more to the left so that it was not centered, creating better flow with the wake of the water. It was challenging getting the text to look good in the parasailing text block. I decided to use full alignment so it would look nicely on the right hand side, as well as flow along the wave shape on the left. I normally don’t like full alignment, but I really worked this one and hopefully, it is acceptable. This was more challenging than I thought it would be.
  3. Message: Having fun on Catalina
  4. Audience: Anyone that would like a fun outdoor experience
  5. Top Thing Learned: Designing for a brochure is different especially when considering “flow.” After meeting with the tutor, I had to change a lot of my design. I also learned to really work on typography. I also took the challenge of trying to create a “wave” shape on the left side of my box and insert the text into it. (I’m not sure how successful it was.)
  6. Color scheme and color names:
  7. Title Font Name & Category: Broadway; Modern/Decorative
  8. Copy Font Name & Category: Book Antiqua;  Old Style
  9. Word Count of copy: 417 (including headings and body copy)
  10. Thumbnails of Images used:   
  11.   parasail IMG_2303 IMG_2287 IMG_0281IMG_0279
  12. Sources (Links to images on original websites):  these are photos taken by the crew member on the boat from Island Water Charters (www.islandwatercharters.com/parasailing.htm) (my sister bought the photo package and so we have the SD card) The picture of my sister and I on the segways was taken by the guy that took us on our segway tour, using my iPhone, so I got that picture from my phone.

Embedded video: 

Project 7 Web Page

P7SusanWallscreenshot

Description: This is a webpage detailing the design process for my logo project. We learned a little bit of HTML and CSS.

Process (Programs, Tools, Skills): I used Notepad++ to do this project. I have used it before and am somewhat familiar with HTML and CSS. I inserted my logo image into the html.  I wrote a paragraph about the scope of the project and the process of picking the colors. I created a bulleted list outlining the steps of the logo creation. Then I opened my logo in Photoshop and used the eyedropper tool to find out what the hexadecimal codes were for the colors. I tried to use the same orange on the background, but it did not look good and detracted from the logo being the focal point, so I found a lighter shade that I think looks nicer. I decided that I wanted to repeat the blue bar at the bottom, so I persisted until I figured out how to change the CSS and make it work. I decided to use the sans-serif font for the body and the serif font for the headings. I liked the white font for the h1, but the instructions said to change it so I changed it to the same peach color that I used for the background (even though I like the white better).  We were given the CSS code and changed various elements in it to customize it. My word count is: 429 words.

Message: The message is about how I designed my logo for the web app that my husband is working on.

Audience: The audience is my teacher and classmates. I really don’t think anyone else particularly cares about the design process of my logo.

Top Thing Learned: I figured out how to duplicate the blue bar at the bottom of the page. It was a little challenging, but I finally made it work.

Color scheme and color hex: Complementary color scheme; #f7cebc and #096895

Title Font Families & Category: Times New Roman, Georgia, serif; Serif

Copy Font Families & Category: Arial, Helvetica, sans-serif; sans-serif

Changes made to the CSS: I changed all the required things: The h1 text color & background color, font colors for the paragraphs & list items, the background color, Font Families and I add at least one css comment. I also changed some padding etc. The main change that I made was to add the footer similar to the H1 background, but change it for the footer:

.footer {
font-family: Arial, Helvetica sans-serif;
font-size: .9em;
font-weight:normal;
text-align:left;
padding: 10px 25px 25px 25px;
background-color:#096895;
color: #FFFFFF;
border-radius: 0px 0px 15px 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
}

I also changed the border of the body to transparent so it would not show.

 

Link to my video displaying my print quality: https://www.youtube.com/watch?v=C6gOdeZYK_U

 

Project 6 Stationary

Letterhead:

P6SusanWall

Business Card (81/2″ x 11″ layout)

P6SusanWall2

Business Card (large layout):

 

bigbusinesscard

Description:

This is stationary with a matching business card using a logo I created for my website.
Process (Programs, Tools, Skills):

I designd the logo first and I thought I read somewhere where we could use a picture, so I did. But then I realized that we can’t use a photo, so I had to redesign it a little. (I will still use the one with the picture on my website though.) I played around with the fonts a lot and ended up downloading the font Great Vibes. After watching the office hours video, I decided to try some texture in the background. I made my own texture using a pattern overlay in Photoshop and saved it as a .jpg file and then placed it in my illustrator file. I wanted to use a brown line underneath for repetition from the table above and I decided that it would look nice to have the text under it. I played around with some different blending modes, but I didn’t like the way it looked with them. I decided that I wanted the text underneath the line to all look the same. I used a bullet for a separator. I added a tag line so clarify what it is about. I varied the spacing on the back of the business card to add a little more interest since the font that I picked had no styles and I didn’t like it in red.
Message:


This is for a website that offers material for computer classes for adults, specifically for the classes that I teach.
Audience:

This is mostly for my students, but I could use it to generate outside interest as well.
Top Thing Learned:

I like InDesign better for choosing fonts, because I can select the text and click the font box and then use my arrows to go down the list  and see what the font looks like in my project. It seems a lot more efficient. I haven’t figured out how to do that in Illustrator. I also saved the logo as a transparent image so it looks on a colored/textured background.
Color scheme and color names:

Analogous: brown, red, gold
(I picked red and gold because most of my students are Asian and those are special colors in their culture.)
Title Font Name & Category: Great Vibes, script
Copy Font Name & Category: Microsoft Yi Baiti, sans serif

Link to my video: https://www.youtube.com/watch?v=Ej5RhxGxO-U

P5 Logos Project

SusanWall-P5Logos

Description:

These are logos designed for a mobile web app that my husband is working on entitled: “Teez the Moment.” People can take pictures of special moments and then immediately order a t-shirt with the picture on as a fun remembrance of the occasion.

Process (Programs, Tools, Skills):

The first thing that I did was to search Google images for t-shirts. Then i used the pen tool in Illustrator to draw a “female looking” t-shirt. I add text and did quite a few layouts. I was excited about some of them and they were pink, black and white. When I showed them to my husband, he told me that it looked like some thing for a breast cancer event and that he didn’t want it to look like it was just for girls. I was discouraged, but went back to the drawing board to try to come up with something more unisex. I found a “male looking” t-shirt and drew one of those. Then I begain playing around with colors. We didn’t necessarily agree on color schemes. I got a lot of feed back and changed some text, colors and a little bit of the design and finally came up with a color scheme that he and I both like.

Message: 

The message is that you can capture special moments and put them on a t-shirt.

Audience:

Those who tend to live on their phones and like to take pictures of the fun moments in their lives. I originally thought this was a “girl” thing and designed “girlie logos”, but my husband didn’t want to discourage males from using it.

Top Thing Learned:

You really got to thoroughly question your client and make sure that you know what it is that they want and it’s hard because sometimes they are not too sure what they want. I didn’t realize the scope of the audience he had in mind.

Three Color Scheme and Color Names:

Analogous: Lime and blue
Complimentary: Teal and Peach (light brick)
Monochrome: Violet

Three sets of Title / Body Font Names & Categories:

Nueva STD: serif/Gills Sans MT; sans serif
Nueva STD: serif/Gills Sans MT; sans serif
Gills Sans MT; sans serif/Nueva STD; serif

Votes on favorite logo:

Top Logo = _7__; Middle Logo = _2__; Bottom Logo = __1_;

At first, most people liked #1, (they didn’t like the original colors I had for #2; My bottom one was different and I liked it and my classmate that did my critique liked it. But then I decided to make the bottom one text only and changed the Title text font etc. Once I changed the colors on #2, I liked it best and so did some of the other people that had voted on. I feel like #2 is the stronger design.

My favorite logo is ___#2___.

The link to my video is: https://www.youtube.com/watch?v=1mkaEubooYs

P4 – Montage Project

SusanWall-P4Montage-FeliciaandJonathon
  • Description: This is a photo montage using masks to blend images together.
  • Process (Programs, Tools, Skills, Steps taken while designing): I looked through lots of pictures and tried quite a few different options, but this is the one I liked the best. I took the picture of the Salt Lake Temple when we were in Utah for Christmas. As I was going through pictures this one seemed to feel right. I had taken it an an angle so I had to rotate it. Then I looked through lots of wedding pictures of my daughter’s wedding and decided on this one. I overlapped them and then used a mask on both of them to blend them together. I decided to use a black background to show a lot of contrast so that the couple would really stand out. Then I found the quote that I wanted and used a script font and a larger size to make it stand out from the rest of the text. I liked the gold color for the text and thought it blended well with the colors in the temple, yet contrasted enough with the black to stand out, yet a rich tone to it (rather than white).
  • Message: I chose these pictures and the quote and my message is the Family and that Families are the focus of God’s plan and that they are forever.
  • Audience: LDS people primarily (they would understand it) although, it could be a conversation starter about the church for non-members if they saw this in our homes.
  • Top Thing Learned: I think I really was able to design this in a way that the message is very clear and beautiful. My son-in-law was really touched and wanted me to get it framed for them. I’m gaining confidence in my ability to design.
  • Filter / Colorization used and where it was applied: I did not change in colorization in this piece.
  • Color scheme and color names: I’m not sure if this is an Monochromatic or a Complimentary color scheme; the white and black aren’t on the color wheel, but I would guess they are complimentary, but there are various shades of gold in the lettering and in the top of the temple with the lighting etc. So I would say analogous because of the shades of gold and if you add lots of white and lots of black, they you have white and black.
  • Title Font Name & Category: Segoe Script; script
  • Copy Font Name & Category: Verdana; sans serif
  • Thumbnails of Images used: FeliciaJonathonWedding IMG_0142
  • Sources (Links to images on original websites / with title of site): These images were on my computer. The first one is of my daughter’s wedding (the photographer gave us the CD and said we could do whatever we wanted with them) and the second one I took in December when I was in Utah for Christmas. I actually took it on my iPhone and I had to take it diagonally so I wouldn’t cut off the top. When I was looking through pictures trying to get ideas, I decided I really liked this one and wanted to use it (after doing other ones with other pictures).

Here is the link to my video: www.youtube.com/watch?v=gvgGI_ezqaQ

P3 Photodesign Project

SusanWall-P3Photodesign-flower
  • Description: This is a flyer showing the photography of this plant and using it in a flyer for a Botany Club meeting.
  • Process (Programs, Tools, Skills): The pictures were shot with my father-in-laws Panasonic Lumix FMZ100 camera. I had never used this camera before, or anything more than a “point and shoot”. So, even though I good light shooting these pictures, I felt like I was “shooting in the dark.” My husband went with me and showed me how to use the metering to focus on foreground objects and background. I got some very interesting pictures of light coming through clouds and such, but I was really intrigued with this plant and decided I wanted to use it in my project. I used the colors in the photo (analogous: yellow, lime,green); I find that God is the Master at color schemes. I used Photoshop and adjusted levels, vibrance and sharpness to make it really pop. I decided to use rectangles in the color scheme colors (muted a little). I felt like the yellow around the picture would really bring out the yellow in the flowers. I decided to center the title over the plant rather than all the way to the left. I decided not to put the borders all the way around the picture to use asymmetry. (most the people I asked liked it that way). To balance it out, I put the date and time right-aligned at the bottom and then the place is wrapped around the corner going up the side. I tried a lot of san serif fonts and other sizes etc. but I didn’t like any of them so I stayed with what I have here. Because I couldn’t find other fonts that I liked better, I decided to add a yellow stroke on the title text to add contrast and draw more attention to the title text. I really liked how it turned out.
  • Message: This flyer is designed to excite Botany Club members about the next meeting about Exotic Plants.
  • Audience: Plant enthusiasts (Botany Club members), adults
  • Top Thing Learned: I’ve never done any “photography” except “point and shoot” so I learned how use metering and focus in on an object. I really enjoyed learning about this and I would love to learn more about how to really use a camera.
  • Color scheme and color names: Analogous; Yellow, Lime, Green
  • Title Font Name & Category: Nyala; serif
  • Copy Font Name & Category: Nyala; serif (I tried some san serif fonts, but I didn’t like the way they looked)
  • Thumbnail of original, unedited image inserted: 

P1030504

  • Date and location you took the photo(s) Photos were taken Tuesday, May 20, 2014 at Peck Road Park, El Monte, CA.

My video: https://www.youtube.com/edit?video_id=ZvtqAmiDVtI

P3 Photodesign Activity

I thought this was a pretty amazing sight showing light coming through the clouds as the sunset. I know it's a little dark, but I loved the picture. The light is coming in at a diagonal from the upper right to the lower left. I adjusted the levels. I added a little vibrance. I also adjusted the contrast a little bit.

I thought this was a pretty amazing sight showing light coming through the clouds as the sunset. I know it’s a little dark, but I loved the picture. The light is coming in at a diagonal from the upper right to the lower left.
I adjusted the levels. I added a little vibrance. I also adjusted the contrast a little bit. (SusanWall-01-Light-Outdoors)

We went to Panda Express to take a picture of the food (and eat of course) I fell in love with the Pandas on the wall and had to take a picture of them. Besides, the lady at the restaurant was worried when she saw us taking pictures of the food. I cropped this one a little bit and straightened it. I adjusted levels. I also adjusted hue and vibrance. (SusanWall-02-Light-Indoors)

We went to Panda Express to take a picture of the food (and eat of course) I fell in love with the Pandas on the wall and had to take a picture of them. Besides, the lady at the restaurant was worried when she saw us taking pictures of the food.
I cropped this one a little bit and straightened it. I adjusted levels. I also adjusted hue and vibrance. (SusanWall-02-Light-Indoors)

This is an interesting plant with an interesting yellow flower and strange pods hanging down, but I thought is was interesting. This one shows the foreground in focus. I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-03-Focus-foreground)

This is an interesting plant with an interesting yellow flower and strange pods hanging down, but I thought is was interesting. This one shows the foreground in focus.
I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-03-Focus-foreground)

This is the same interesting flower, but this time with the background in focus. I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-04-Focus-background)

This is the same interesting flower, but this time with the background in focus.
I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-04-Focus-background)

This shows a duck leading into the photo. Is was hard because the duck wouldn't hold still. He is leading into the picture with room to continue in the photo. I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-05-Composition-Leading)

This shows a duck leading into the photo. Is was hard because the duck wouldn’t hold still. He is leading into the picture with room to continue in the photo.
I adjusted the levels. I also adjusted the hue and vibrance. I also used the sharpen tool. (SusanWall-05-Composition-Leading)

This is a picture of a hawk in a tree. He and the branch that he is perched on cause a strong line at the third.  I think it looks nice against the nice blue sky. I didn't need to do a lot with this photo because it came out pretty good. I did adjust the levels a little bit though. I was glad he was so content up in that tree. (SusanWall-06-Composition-ruleofthirds)

This is a picture of a hawk in a tree. He and the branch that he is perched on cause a strong line at the third. I think it looks nice against the nice blue sky.
I didn’t need to do a lot with this photo because it came out pretty good. I did adjust the levels a little bit though. I was glad he was so content up in that tree. (SusanWall-06-Composition-ruleofthirds)

Project 2 Event Ad

P2SusanWall-page-001
  • Description: This is a flyer for a Photoshop class that I will be teaching in the summer. I created it and then found out that it was supposed to be a fund raiser. After texting our teacher, she told me that I could turn it into a fund-rasier. This was done with Microsoft Word program.
  • Process (Programs, Tools, Skills): I scanned in the images from an exercise in the
    Photoshop Book that I teach from. The original pictures showed a picture of a cyclist and then a cropped picture with a formatted edge that looks like a frame. My daughter told me that those pictures wouldn’t interest her in the class because she could do those things on her phone. So I found another exercise in a previous book that you see above where we bring in other images and use other tools to do the landscaping for the house. This is a better example of something that can be done in Photoshop. I also changed a few other things based on feedback that I got from the critiques. I chose the green color because it went well with the first pictures that I used; I decided it looked good with these pictures too. I liked the white contrast and thought it had a summer-like feel to it. I like the repetition and contrast of the white boxes. I like the contrast of the heavy
    Britanic Bold font and the Arial font for the rest. I tried using a serif font for the body copy and didn’t like it as well.
  • Message: I think the message Photoshop grabs the attention because it is placed in the upper right corner and uses an eye-catching font as well. Then the subtitle is in a
    different font and is spread out so that the white space also attracts attention that it is a fund-raiser. Below that we see what the money raised will be used for. In the smaller box towards the bottom we find the date, time, duration of the class and the price of the class.
  • Audience:  The audience is adults over (18 years and older), male and female.
  • Color scheme and color names: This is a monochromatic color scheme using shades of green and white
  • Top Thing Learned: I prefer doing my layout in InDesign where I have guides etc. I was already familiar with the design tools in Word, they keep adding more and more options for changing photos in Word. It’s great to know if you are working on a computer that doesn’t have the Adobe programs.
  • Title Font Name & Category: Britanic Bold, Modern
  • Copy Font Name & Category: Arial, San Serif
  • Scanned images used, sources, original sizes, location of scanner used: I scanned the images from a book, “Photoshop CS4 Comprehensive Concepts and Techniques”
    (I used a newer book for the original pictures and this book for these pictures). These pictures were origianally 1369 x 949 px and 1369 x 936 px. I used the scanner at my home which is an Cannon MP 170.

You can see my video here: https://www.youtube.com/watch?v=lmSsjAHMhlY