Came out looking a lot more ominous than I’d intended. Luckly she loved it, but then again, if I gave her scribbles on a piece of paper, she would say she loves that too. Shapes and type made in Illustrator, textures and shading done in Photoshop.
Jun 21
B-Day Card for the Mom
Posted in Tyler Tagged cards, illustrator, photoshop
Comments Off on B-Day Card for the Mom
Jun 20
Dad Day Card
Posted in Tyler Tagged cards, illustrator, photoshop
Comments Off on Dad Day Card
Key aspects of design:
- My dad’s favorite color is deep purple. Deep purple didn’t look good as a background color, so instead I made the background a light purple gradient.
- My dad’s favorite shape is the Mobius strip, so I added a mobius strip to the background too.
- My dad likes martinis, so I named the custom font I created in Illustrator “Martini” as per my mom’s suggestion.
I made this Mobius strip in Illustrator by outlining a picture of a Mobius strip with the Pen Tool, and then creating blends between the lines.
This is the original type I created using the Pen Tool and blending in Illustrator. After I put the letters together, I noticed that they formed a “T,” so I was thinking of using the group of letters to be the “T” in “Love, Tyler.” In the end, I thought that the other font I made was cleaner and nicer.
A monster face I made in Illustrator with the Pen Tool and blending. Never ended up using it. Maybe in the future.
Jun 19
Final Banner Design
Posted in Tyler Tagged banners, DC.org, illustrator, photoshop
Comments Off on Final Banner Design
Jun 14
Two more banner concepts. Working on a forth that will give the illusion of a 3D plane.
Jun 13
RGB
In Photoshop we use the RGB color group which is made up of Red, Green and Blue. These colors make up the three color channels in RGB and are known as the additive primaries. When all three emitted colors are added together, they create white light. When the traditional primary colors, red, yellow and blue are added together they create black (although it’s more of an unappealing brown). The difference is because additive primaries ARE light – they emit light. Instead of emitting light, the traditional primaries reflect and absorb light. Since computer screens emit light, RGB should always be used for viewing work on screens.
The RGB colors get broken down into numbers in order to be interpreted and then subsequently displayed correctly by browsers. The scale that the numbers can range from goes from 0-255, with 0 being the absence of that color and 255 being 100% of that color. The numbers are then further translated into six digit hexidecimal numbers (triplets). Different browsers interpret information differently however and this problem also extends to the interpretation of colors, so one must be careful to ensure that their colors are browser safe.
CMYK
For images that will be printed the CMYK color group is used. C=cyan, M=magenta, Y=yellow. Black (K) is also used. These colors make up the four color channels of CMYK. They are called the subtractive primaries because when one subtracts a color out of the additive primaries, one of those colors is left. Subtract red from the group and one is left with cyan, subtract blue and one is left with yellow and subtract green to end up with magenta. These colors are not blended together when something is printed. Instead, millions of tiny dots of these colors are grouped next to each other, in order to achieve the desired color. A group of cyan and black dots would mix and appear as a dark blue color to our eye.
GRAYSCALE
The grayscale option in photoshop uses up to 256 shades of grey, so unlike RGB and CMYK, it only contains one channel. If one wants to create a black and white image, you can just convert it to grayscale. Grayscale destroys all the color information though, so you should always make a copy in order to retain all the original information.
LAB COLOR
The lab color mode contains all the colors that are used in RGB and in CMYK. It contains three channels: the lightness channel (L), channel a and channel b. The L channel controls how dark or light an image is. A lightness value of 100 would make the image white, whereas one of 0 would make the image black. The other two channels, a and b, control colors. The a channel controls the color ranges from green to red. The b channel controls the color ranges from blue to yellow. Unlike RGB or CYMK, the lab color mode is device independent, so the color will always remain consistent.
HUES, TINTS AND SHADES
A color, like red, is called a hue. When the hue is pure it is fully saturated. To change the saturation of a hue, one can add a tint or shade to it. The addition of white to a color would make it a lighter tint, whereas the addition of black would make it a darker shade. Tints and shades come in handy when one wants to play around with contrast. Black and white is the most extreme contrast, so if one wanted to experiment with this, they could create contrast by adding white to a hue and placing this hue next to one that has had black added to it.
Of course, using complimentary colors, like green next to red, blue next to orange etc will also create contrast. However, when these colors are placed next to each other they start to vibrate, which can be very tiring on the eyes. It really just depends what you want to accomplish and what effect you want to have on the viewer.
Jun 12
Basic Photo Editing In 5 Easy Steps
Posted in Phoebe
Comments Off on Basic Photo Editing In 5 Easy Steps
Here is a photograph I took while visiting Coney Island last year:
Step One: Duplicate! Before you begin editing a photo, ALWAYS duplicate the image. This way you can always go back to the original in case you ever change your mind about the way the photo was edited. To duplicate an image, click the Image menu located in the menu bar, scroll down and click “Duplicate.”
Step Two: Crop. I want the seated men and women in the center of the image to be the focal point. However, the boy on the right is very distracting. He is walking into the frame, his motion taking the attention away from the static women. His red t-shirt is the most saturated color in the image, which also diverts our attention towards his direction and away from the more subdued colors of the seated group. So I crop him out. To do this select the crop tool located in photoshop’s (I’m working in CS4) toolbox. The cursor has now become the crop tool, so now you just drag the cursor/crop tool over the desired area you want to KEEP and then press the “return” key on the keyboard. If you don’t like the result, just click on Edit from the menu bar and select the”undo” or the “step backward options.
Step Three: More Cropping. I’m still not satisfied with the basic composition of the photo. Now the group is smack-bang in the middle of the image, making it a somewhat boring compostion. Their body’s are seated in such a way so that they are all pointing to the right-hand side of the page. Since the energy is being directed to the right-hand side, I want to keep as much space as possible on this side. This keeps the flow of the page. So I crop out the empty space on the left hand side of the page. I crop out the fence at the top, as I find it distracting and unnecessary. I also crop the bottom off the wooden deck, so that it cuts the right hand side of the page at roughly a third.
Step Four: Color Editing. This photo has slightly subdued colors and I think it would look much better if these were intensified a little bit. Instead of just increasing the saturation, another way of achieving this effect is to click on Image, select “Mode” and then select “Lab color.” Once the photo is in Lab color, click on Image again, select “Adjustments” and then select “Curves.” The curves window will appear, which has three channels you can adjust; the Lightness of the image, channel a, which adjusts the colors red and green, and channel b, which adjusts the colors blue and yellow. To adjust a particular channel, first select the channel, and then click one of the little sliderss that cap each end of the line. By dragging the sliders you will be changing the lightness or color of the image. For this image I adjusted the both sliders in the Lightness channel by a value of five. For the a and b channels I adjusted every slider by a value of 6. Now the image has more depth.
Step Five: Adding More Depth. Adjusting the colors gave the image depth, but to give it even more, one can use the burn tool. The burn tool is located in the toolbox, however it’s hidden under the dodge tool. You can select the burn tool by clicking on the arrow that appears in the bottom right hand corner of the dodge tool. Once selected, the dodge tool appears as a circle. The size of this circle can be enlarged by pressing the ] key, and decreased by pressing the [ key. You can also change the opacity of the dodge tool by increasing or decreasing the strength of the exposure. This is done by clicking on the exposure box (found below the menu bar, in the bar that appeared when the dodge tool was selected) and moving the slider to the right or left. For this image I set the exposure at 3%, so that the photo doesn’t appear to have been altered. With a large brush I stroked each edge of the canvas to create a frame. Now the image is complete!
Jun 11
Forgot to post my update yesterday. Darn it!
Today I worked on logos that could suit any foundation that contributes to DonorsChoose.org. Since a lot of foundations don’t have logos, we make ones for them to post on the site. Pictured below (the names are completely arbitrary):
^^^
Not happy with this one. That big shape is weird.
Jun 10
A rough mock-up banner for DonorsChoose.org’s summer campaign. The picture of the girl was taken off of a stock photo site and inserted beneath a mask I made in the shape of the rectangular picture-area of another stock photo of a polaroid. The font seen here is VAG Rounded Standard. The jumble effect for the letter was done setting each letter to a random 15-degree tilt in the “Transform Each” dialogue box in Illustrator. The lines beneath the text were also created in Illustrator by creating a brush out of five different-colored rectangles, creating the brush stroke around a pen line, manipulating with a mesh, and then expanding the shape so I could manipulate each colored line. Readability needs to be addressed, and I’m going to try a few more versions. Here it is in the context of the site (it’s a little streched out):
The science behind the copy:
For the headline, I wanted something catchy, cheerful, and evocative of generosity. I went with alliteration to cover the catchiness, the word “celebrate” to add cheer, and “sharing” as a way to activate prosocial thoughts without referencing money. I recently read a psychological study mentioning that when words dealing with money are referenced, people tend to weigh extrinsic rewards (like recognition or avoiding negative evaluation) for charitable donations. On the other hand, when faced with verbs like “share” and “volunteer,” people donate for intrinsic reasons (i.e. empathy, resultant feeling of well-being, etc.). Thus, I tried to stay away from words like “donate” and “give,” which have more monetary connotations. (On the other hand, both “donate” and “give” might be more direct.
In the byline, I wanted to offer the donor a chance to become part of a category (“*become* a supporter”) rather than pushing a one-time action (“support”). Another study I read and a social psych lecture I recently heard talked about the power of rewarding a disposition, or someone’s character – as opposed to rewarding a single behavior. This encourages future giving, since the donor thinks to themselves, “I am a supporter of year-round schools,” instead of “I supported year-round schools.” Again, with the word “support,” I tried to stay away from associations with money.
Finally, I put “today” at the end to add a sense of immediacy, so users won’t simply look at the message and put their donation off until later.
