More Tutorials!

8-Bit Gif Tutorial & Color Wheel Tutorial

Color Correction Tutorial

I ran into trouble with the image of the swan painting. Since the painting was so yellow, I had difficultly in trying to determine the original colors of the painting to use as an end goal. I wound up referencing the example “After” image and used those colors as reference. The adjustment tools I used for this tutorial include: Brightness and Contrast, Exposure and Gamma, Hue/Saturation, and Curves.

 

 

Reminder to self: I need to update image attributes.

Logo Tutorial Redesign

I redesigned the template for the symmetrical logo tutorial. I used illustrator to create a horizontally symmetrical badge. The color version of the logo was limited to a max of 3 colors. Suloni also requested to see the B&W logo on a black background. I created two versions of this: one with the original B&W logo on a black background and one where I inverted the B&W logo on a black background.

 

 

Previous Drafts

 

For the sunset logo, I originally thought to create a camping or nature badge, something like what a boy scout would receive. After I created the 3-step gradient semi-circle, I didn’t know what I could add to it without surpassing the 3-color limit. I ended up discarding this draft after running into creators’ block. The Texas logo was one of the first logos I created. I wanted to use the word STA for the STA training template and noticed that you can spell Texas with STA. I also noticed that X was both horizontally and vertically symmetrical (and diagonally symmetrical, though that depends on the font), so I decided to use the X as the main feature in my symmetrical logo. Then I inserted the letters in the spaces of the “X”. I wanted to make “STA” stand out so I used a different color for those letters. I realize that the logo isn’t truly symmetrical because of the letters, but it loosely adheres to a horizontal and vertical symmetry.

TBH Kids: Time Travel Interactive Sketches

I’m currently working on redesigning the “Time Travel to an Ancient Rock Shelter” interactive. The images below (if I succeed in uploading them) are my sketches for the first scene of the interactive.

 

Option 1: Inside the Time Machine 1

I’m considering digitally painting this scene with a gouache style. I think it might make it look more like a children’s book if the image were painted than with vector drawings. The scene depicts Dr. Dirt off to the side with a speech bubble were the text will go. Behind him is the main interface of his time machine with buttons, screens, and levers. There will be a window that displays the destination (prehistoric Texas) and above the window will be a display that shows the time in which we’ll arrive (XXXXXBCE). I haven’t decided whether the window will contain an image of prehistoric Texas, or of a wormhole in space. On the square TVs, I could insert pictures of prehistoric Texas from the TBH box repository or from creative commons repositories online, if possible. There would be a large “Go!” button in the center that users would click to move to the next scene. The button could be a bright green to indicate that it is clickable. I am also considering making the outlines darker or thicker for the button to make it stand out. The main color for the backdrop would be chrome (grey) for a futuristic feel.

 

Option 2: Cactus Spaceship

Another idea I had was to put Dr. Dirt into a time machine travelling through space. To make the machine feel more “Texan”, I  decided to make it a cactus. One thing I noticed was that even though the old site had flash animation, the interactive still felt static, so I wanted to make the redesign more “active”. One way of doing this is to depict an object currently in action, like a rocket travelling through space. I could even add a sort of motion blur to make the space appear as if its moving. The interactive would display text on the left and if necessary, can be put in front of a black rectangle (opacity: 30-70%) to enhance readability. This design would incorporate the UI buttons Jun designed (i.e. the “Next” button).

 

Option 3: Inside the Time Machine 2

This is a different take on the same concept presented in Option 1. In this scene, we have Dr. Dirt inside the time machine with a window looking out to our destination. Within the window frame, we would have the Earth with the shape of Texas colored (any color but green or blue) to make it stand out. This can be constructed with vector shapes. The text would be black and placed on the left-hand side of the frame and would incorporate the new UI buttons. The time machine will likely be grey, so there should be no problem with readability. This design is relatively similar to the old design in terms of object-placement.

Update (10/10/16): Logo for introduction has been submitted.

Update (9/26/16): I completed the blocks for the intro video. Initially I had drawn a pyramid of six blocks. Since Valerie’s character was much taller than the total height of the image, and resizing the blocks would make them too big, we decided to include a stack of blocks behind the initial pyramid about six blocks high. The stacks would decrease in height for the transition. To make the blocks in the foreground stand out, I recolored the pyramid to lighter tints and added a blue-ish drop shadow behind it. To add the shadow, I tried using the Drop Shadow effect in Illustrator, but that looked odd and wasn’t as workable as an ellipse. I wound up adding an ellipse with a gradient that faded to 0% opacity. I used the same blue hue and I also feathered the outer edges of the ellipse (which I could have done using the gradient tool, but I just ended up using Feather instead). The colors of the blocks were originally darker overall, but I made them lighter to remain consistent with the other objects/characters in the video.

I also started working with Valerie on a logo for the intro slide, as requested by Ashley. We came into some trouble with the given title: “Developmental Psychology,” since “developmental” was such a long word (13 letters). If we stacked the title, developmental would be longer than psychology, and it looked rather odd when we first made it on Photoshop. Then

I drew a large teddy bear in Illustrator that may/may not be used in the introductory video for PSY 333D. As per instructions, I used colored lines in the line art instead of just black. I may have to adjust the coloring of the bear and make it more vibrant to fit the overall color scheme of the video.

Introducing German Website

I worked with Stacy Vlasits and QiWei Li on the Introducing German website. I primarily worked on migrating content from the old site into the new site. I uploaded the relevant PDF files and images into the media gallery and categorized them. I updated site and file links on the new site. I added pages to the menu as I populated pages listed under Materials and Start A Program with the correct content. I also helped format text from the discussion threads on the old site, compiling the contents into a PDF to upload onto the new site.

Orientation and Training

I used Illustrator to create this banner. I was inspired by handwriting on the original template and just decided to write my own name in cursive for my banner. First, I worked with the watercolor brushes in Illustrator to achieve a messy, splotchy effect. I then added color accents to the originally blue strokes. I then decided to create a solid color background to fill in the white space. I made the jellyfish in Illustrator as a spur-of-the-moment addition and imported it into my banner file. I added the text last.