Thursday, August 6, 2015

AUDL Web Buttons

TORONTO RUSH WEB BUTTONS







The template of the web button uses a gradient overlay of black to white. The set of diagonal lines are emulated on each side.

 The video web button uses a play icon to convey that you will be watching videos.

The partnership opportunities web button uses a black and white handshake jpeg as a background image. The handshake is used to signify business opportunities and forming partners.



Disc Designs

OTTAWA OUTLAWS DISC DESIGN V1


This disc designs uses the head of the horse that is a part of the Ottawa Outlaws logo. The head of the horse is the focus point and only the green and black is used as the colour palette. The size of the strokes ranges from thick to thin to give the illusion of layers.


OTTAWA OUTLAWS DISC DESIGN V2 
This design plays with the size of the stroke for the inner circle. The size of the stroke gives a warped contour and that gives it an edgy look.


OTTAWA OUTLAWS DISC DESIGN V3

This disc design uses a diffused glow on the outer edges of the inner circle to make a contrast between the thick blackstroke of the outer circle. The faded edges of the inner circle make the text from the logo blend in.



VANCOUVER RIPTIDE DISC DESIGN V1


This disc design plays with the warped stroke to emulate the waves in the logo.



VANCOUVER RIPTIDE DISC DESIGN V2

This disc design uses a guassian blur to make a contrast between the dark blue and the other green tonesin the design. The inner circle is  created with dashed strokes that are the same blue colour from the logon and has an opaque lighter blue colour.



TORONTO RUSH DIS DESIGN V1

This design is created with 2 sets of stroke dashes that extend an arrow tip at the end of the path. These are grouped.The arrow tip creates a look of a wheel that is aligned with spear points that are going really fast.

TORONTO RUSH DISC DESIGN V2
This disc design was to emulate the notion of the word rush. Rush means to move with speed. The red lines emulate speed that is coming off from the type.

 TORONTO RUSH DISC DESIGN V2
This disc designs has a zig zag line that is in the background and is a blur to mimic the speed. The problem with this design though is that the zig zag line a part of the logo. 

CLAX

GAME MATCH SLIDE



This is the slide of the match-up game that's displayed on the video board at the CLAX games. The colour palette is inspired from the logo of the home team that is playing. The hunter green creates a border to section off the background and to contrast the brighter tone of the green. The text has a drop shadow to give it depth and contrast. The circle is the central point to showcase the teams and has a drop shadow to give it contour and not make it flat. 

BARRIE PLAYER CARD



The player's card is for the Barrie Blizzard team. I used the lacrosse stick as to reference the sport and criss-crossed them to give movement. The player is in a box that's would be shown up on the board display and with a drop shadow to give it depth. The player's number is on the top that's emphasized by a gradient. The player's name is on the right and left hand side for the viewer to read and see. 

CYCLOPS MERCHANDISE LIST V1

                                               


The design is based on the colour palette and creating a window frame. The colour palette is used from the Southwest Cyclops logo. The images were cropped and then exported into png. The text is a tone of black. The merchandise is displayed as a window frame that's composed of vertical and horizontal lines that are bevel and emboss. There's 2 sets of square frames that are joined together to form 1 background shape. The background colour is a tone of the orange. 

The headline is emphasized with the gradient overlay that's reversed and uses the colour that contrasts the tones of orange that are used elsewhere in this design. 


CYCLOPS MERCHANDISE LIST V2



The second version of the merchandise list was to create a simple, clean, and uncluttered design. The window frame didn't work because it was too cluttered where the merchandise was too close to each other and difficult to read and differentiate them. 

The second version was more refined and organized. The text is a caption and the images are emphasized and is more easier to see and differentiate. The caption helps to create sections to organize the merchandise. The images are larger due to having its own frame that has a thinner stroke outline. The kerning and leading helps to make the text be readable by having not too much space between lines of text. The singular thick stroke mimics the strokes of the frames and unites the logo and the text as a cohesive unit and headliner.









Promotion/Advertisements



Alice's Restaurant Promotion



This promotion was used to entice customers to try the new wings and beer at Alice's restaurant. I wanted to create a simple design that really made the customer pay attention to the message. I used jpegs of glasses of beer and just enlarged and decreased the size to create a foreground and background. I used the jpegs of the glasses of beer and wings to advertise their wings and beer. The position of the beer and wings is to create movement from upper right corner to the bottom. The colour of red is create boldness as to highlight their new food. The box that contains the message is the center and focal point of the design and I changed the width of the stroke to make contours and give contrast of thickness to thinness. The colour palette was inspired from their logo.



Durham College Student Offer




This advertisement is for a student discount for the Durham students for the last home game. The diffuse glow and florescent green is used to highlight and emphasize that there's a student offer. The student offer is outlined with the colour of black to make the type readable and to bring it to the forefront. The red colour is used to highlight that students might want to take this offer to get away from homework. The colour palette is inspired from the Turfdogs and CLAX logo. The text is sectioned off in rectangular shapes and is a way to break up the text to make it readable than a long paragraph. 

University of Alberta Panda Bears Volleyball Newsletter



This is the email blast that is used to market University of Alberta volleyball team. First I help create the first 5 box of text and last box of text that are hyperlinks to their site. It was a learning experience of how digital media is used to market and communicate through email in an effective way. We can reach a wider audience and readers can purchase tickets quicker via hyperlink, phone, or email than just going to the site directly to find the same information. 

The colour palette is inspired from the logo. The colour is used to create a contrast of the yellow and green colour in this design.

The first block of text used different style techniques. The text has a drop shadow to make the text standout. The background uses a diffuse glow to give shape, contour, and make the outline glow. 

The second block of text uses emphasis by making the text bold and condensed to highlight the playoffs.  The green colour for the text gives contrast and gives important date details. 

The third and fourth box has 3 different layers. There's a hunter green border which helps to distinguish the layers within this box and break up the tones of green used in this box. The second layer has an outer glow of black to make the green darker to bring out the text. The text has an inner glow of white to make the reader know where to click and to emphasize CLICK HERE. 

The fifth box just uses a drop shadow on the text to make it standout. However the text, "EASIER" is increased in size to show that you can guarantee your seat by purchasing your tickets via phone, email, or by hyperlink. 

This design taught me how to make the text become the most important message and integral part of the design. It was simple done by using few colours for emphasis and contrast,  a dynamic background, and different style effects to make the text pop. 

Winter Box Lacrosse Ad




This winter box lacrosse advertisement was for registration of the winter box lacrosse. The colour palette was inspired from the Junior CLAX logo. 

The design is based on creating contrast, emphasis, and a clean look. The colour red is used to make the white colour of the headline text to pop out. The vertical lines is used as a way to section off each age group. The red colour of the text is used to tell the viewer that this is how much it is to register your child. The red horizontal lines is used to section off this block of text and to separate it from the image. The colour grey is neutral which makes the other colours, lines, text, and image cohesive in this design.


Google AdWords



This Google AdWord is a way to purchase tickets for the Durham Turfdogs lacrosse game and is a trigger tool for this ad to come up on Google and other sites on certain keywords that you type in. This maximizes your search quickly and disseminate the message at a faster pace and to a larger audience. 

The design is similar to ticket. The Turfdogs logo is at one corner and is a larger image to represent the team. The text is condensed and bold which conveys strength and emulates the text in the Turfdog and CLAX logo. The gradient is used to make an emphasis and contrast in colour.  

The colour of the click button is to give it boldness and focal point. It's placed in the bottom right corner because the sign off button for most sites is usually on the right-hand side. There is a gradient that's used to make the rectangular shape become three-dimensional. 





Wednesday, October 22, 2014

Photoshop, Illustrator, InDesign - Print Designs


 This was my mock-up design for Lil Wayne fan page website. I used a jpeg of a flame to create a connection with his lyrics of his song, "Fireman" and to create an energetic atmosphere. I used an image where he portrays confidence and swagger and the background is busy and matches with his outfit. I used few colours to highlight the headlines of the topics of his life story and the use of minimal colour is to create a clean and cohesive look. I create the search bar icon and implemented the use of Facebook and Twitter icons that would link to his Facebook page and Twitter page to show his personality and to connect to his fans. I created the head banner with the use of Adobe Fireworks.



 This poster was created to disseminate more information and bring more awareness to the new discovery of "Jimmy" at the ROM. The colour and the font for the headline and subheading was to fit the theme of aging. The jpeg is a skull of a Tyrannous Rex that looks faded to fit the age of ancient and prehistoric by lowering its opacity. The skull is behind a white background to give it stark contrast and make it the focal point. The text in the body paragraph isn't stylized, but just Garamond to give a crisp and refined look and to make it readable. The colour of the poster is a solid colour with a textured background and an overlay of a cloud pattern background to give more interest and to fit the theme of aging and uncovering layers.



This is the recreation of using the content and imagery from the Much Music website on a mobile site. This is the mockup of a wireframe from the same design at different times when you see all on the screen or scrolling up and down on the web page. This design is busy by the variety of cool and bright colours. However there is a balance achieved by the content being organized and less which gives more attention to detail to retaining the information, being focused on reading, and gives it a clean look. The colour was used strategically by colour matching the headlines with the links. The main focus point is the video player has less videos to view and is smaller.  The original Much Music website had too much information displayed everywhere and too many videos. There was too much to look at and was more likely to browse about than reading the content.



This ticket was created for fans to go to a Lil Wayne concert which was a sector of the Lil Wayne "A Mili" campaign. The ticket had a few inkblots to create a busy mood that fits Lil Wayne's confident and swagger personality. I chose the inkblots because it isn't refined which suits Lil Wayne's personnae by mixture of music styles by being punk, rock, and hip hop in his style of clothing and music. The font style is Myriad Pro which is refined and used the font Impact which connected to the explosive and messy inkblots.


This is the recreation of the Much Music website which taught me how to use the grid and ruler guides to make a mock up. It taught me how to use the ruler guides effectively to ensure elements were aligned such as categories or headlines. It showed me how to organize my layers into folders and naming each layer in relation to the element to find specific layers faster and efficiently. I used the eyedropper to find the exact colour and how to save them as a swatch in the swatch folder. I used one image of Rihanna in the background to bring interest and to relate it to music. I changed the hue saturation of the background picture of Rihanna to give it a contrast between the bright colours on the site and for your eyes to go back to the website.


This is my alternative mockup to the Much Music website. The video player is still centered, but smaller which makes more space for the categories of content for shows, new music, ringtones, and advertisements. The user can read the material more easily and faster. They can see the links and the content is organized in prioritization. The advertisements are separate and last which helps to focus users to read and watch music and tv show content.The navigation bar and the footer are stylized to create a separation from the Much logo and to create contrast. I used the effects to create shadow and to make it three dimensional. This creates an emphasis for the users to differentiate from the footer, login and register icon.


This was a page from my booklet that was a story of how doodling inspired me to draw, to love art, and to inspire to have a career that deals with art in some form. This exercise helped me to use different formats such as a spread and letter for print. This taught me how to organize and set up my pages in the sequence order for how it was suppose to be printed, taught me how to change the width, margin, gutter, slug, and bleed, and how to define printer presets. The text and imagery is minimal, but helped me to use either an image or text to create a focal point and to execute the principle less is more.

This assignment helped me to create paths and exploring different brushes to create the precise stroke. It helped me to use the feather tool to make the shadows light and to blend in especially around the body parts that was bending and to give the illusion of the character crouching in the dark under a dim light source. I love the detail of the brush strokes and shadow on the feather tuff on the arms of the body suit. The strokes were easier to trace because it was mainly uniformed compared to the tracing of the hair which was difficult because it was organic and more fluid. I coloured in with the brush to paint intricate details which was used for the hair and shadows on the body suit. The paint bucket was used to fill large portions of the body suit. This exercise was meticulous due to the very detailed drawing and the colour palette was minimal and rather used tints of black to portray shadows and white for highlights. The pen tool showed me how the pen can be used in another way as a way to draw and mimic strokes. I learned how to control the brush tool, when colouring in, by using the function C+Alt on the thumbnail image shown on that layer. I used the hue saturation tool to lighten her skin colour to make it paler since she's in the dark mostly and to darken her lips. 


Wednesday, April 17, 2013

Audio-Flash Hypeframe- Project 1

Audio HypeFrame Works


Here's the link to the video that was the audio track for my audio hype frame work projects. The track is called "Alive" by the artist, Krewella.



This audio project used the directional vibration and fixed vibration on the circle. The track is dance music which is hyper and fun so I used a bright pink and increased the brightness and changed the blending mode to multiply. The colours of the circle were of a colour pool of the bright colours that I used from the Kuler application from the Kensington market graffiti photo below.


Colour Palette used from this Photo


The directional vibration was used on the y axis to move the circles randomly on the y axis position. The fixed vibration was used to rotate, scale, alpha, and to move on the x-axis. The text changes in scale. The circles and text convey the mood of hyper and energy which fits the theme of being alive and give a psychedelic experience when you feel you're on top of the world and living from your soul.

Screen shot of Movie Clip


The movie clip was edited by changing the outline of the stroke to make it stippled to make the circles seem to burst into miniature sizes. 


Text-Feel Alive


The text is fixed vibration and changes in scale to give a pulsing beat and emphasis that feel alive vibe. The text was edited to have a blur filter which was an inner shadow of orange and the font style is Impact which gives a bold look and contrasts from the circles. The text rotates 360% to give a spinning look and that it's out of control.


This is the link to the video:


Screen Shot 01

This is the screen shot of the swf file. The circles change in size and move randomly very quickly across the screen and overwhelm the space. The circles still give a pulsing vibe and rotates randomly also.


Begin of Track-Tempo increases slowly
Octaves are at Maximum-Circles scale in size

These screen shots are  showing that the circles enlarge in size and alpha in scale and alpha tracker. The higher the notes which would be the maximum frequency  of the octave would make the circles scale larger and scale down when it was lower frequency in octave.The sine wave would change in rotation and position and y and x position for the oscillator sine wave on the frequency of the note. The circles makes you lost as you see the illusion of layer and depth of smaller circles in the larger ones. This was more successful to give an organic movement and feeling by having the circle and text respond to the audio than manipulating and editing the images to convey a mood. 

















EXERCISES

ADJUSTER HYPE FRAME


Colour Palette Adjuster

Combining square and Pac man to make one image



Different Brush Strokes via Mouse



Blob effect


Longer strokes

Stipple effect

Each time you click on a different area of the screen,
different hex colours will be displayed

Grid Layout and Sound Analyzer


Movie clip and text moving to Oscillator frequency and octaves
and appearing as a sineWave

Swarm Effect

Swarm effect with Blur filter and Capture on Bitmap Canvas

VIBRATION 

Circle changes in alpha, uses vibration that gives a pulsing look,
changes in scale, changes in position randomly on x and y axis