Sarah's Art Blog: 2015

Monday, April 20, 2015

Animation

I used stop motion to do my commercial in photoshop. My logo was a surf shop so I filmed things at the beach for what you can buy/use from a surf shop

Wednesday, April 15, 2015

Sunday, April 5, 2015

For my collage I picked a the quote "I'm in love with cities i've never been to and people i've never met." -John Green because I love to travel and have so many places I want to go in my lifetime and people I strive to meet. I chose a central point of NYC and filled the billboards of time square with different locations playing with the lighting of each picture to make it fit into the nighttime atmosphere. I also added in the Eiffel Tower and had to make certain selections of the original background to overlap to make it look like the tower belonged. I added in some stray famous people on the bottom as well and used motion blur and lighting adjustments to make them blend seamlessly into the background

Tuesday, March 31, 2015

Custom Graphic

I went for a more artistic approach to my graphic. I customed the pattern of the picnic blanket and the pattern of the tree. I traced out the silhouette of the birds and made them a brush as well as using an image from the internet to make the butterflies http://globe-views.com/dcim/dreams/butterfly/butterfly-03.jpg to make them a brush as well. I used brushes to create the texture of the grass as well as the clouds and used different blending modes to make them fit into the picture i was trying to create. Lastly I made the sun by creating a circle shape and three copies of the shape changing the blur on each one to create a glowing affect and used multiply to create a shadowy effect from the clouds.

Sunday, March 29, 2015

Magazine Cover

I reconstructed a National Geographic magazine cover with the use of three original photos from my trip to Europe. I used many different setting and tools such as the liquefy tool, shadows, color adjustments with brightness, boarders, and strokes. This was one of my reference covers:

Monday, March 23, 2015

self insertion

Tuesday, March 17, 2015

html

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//line one variables
var x = 400;
var y = 50;
var x2 = 400;
var y2 = 500;

//variables diag left
var x3 = 400;
var y3 = 50;
var x4 = 200;
var y4 = 400;

//variables for line first sail
var x5 = 200;
var y5 = 400;
var x6 = 400;
var y6 = 400;

//variables for bezier curve- other sail
var x7 = 400;
var y7 = 425;
var controlx2 = 450;
var controly2 = 350;
var controlx3 = 475;
var controly3 = 300;
var endx7 = 450;
var endy7 = 150;

//variables for curve sail right
var x8 = 450;
var y8 = 150;
var controlx4 = 500;
var controly4 = 225;
var controlx5 = 525;
var controly5 = 325;
var endx8 = 525;
var endy8 = 425;

//variables letter f
var a = 50;
var b = 100;
var a2 = 50;
var b2 = 150;

var a3 = 50;
var b3 = 150;
var a4 = 75;
var b4 = 150;

//variables close line second sail
var c = 525;
var d = 425;
var c2 = 400;
var d2 = 425;

//variables for letter i
var c3 = 100;
var d3 = 125;
var c4 = 100;
var d4 = 150;

var centerx = 100
var centery = 115
var radius = 2

//variables letter f
var c5 = 125;
var d5 = 110;
var c6 = 125;
var d6 = 150;

var c7 = 125;
var d7 = 110;
var controlc = 129;
var controld = 100;
var endc = 135;
var endd = 110;

var c8 = 115
var d8 = 125
var c9 = 135
var d9 = 125

//variables letter e
var e = 175;
var f = 125;
var controle = 170;
var controlf = 115;
var ende = 162.5;
var endf = 112.5;

var e2 = 162.5;
var f2 = 112.5;
var controle2 = 155;
var controlf2 = 115;
var ende2 = 150;
var endf2 = 125;

var e5 = 150;
var f5 = 125;
var controle5 = 147;
var controlf5 = 135;
var ende5 = 150;
var endf5 = 145;

var e6 = 150;
var f6 = 145;
var controle6 = 162;
var controlf6 = 160;
var ende6 = 175;
var endf6 = 145;

var e3 = 150;
var f3 = 125;
var e4 = 175;
var f4 = 125;

//variables for letter s
var e7 = 262;
var f7 = 125;
var controle7 = 250;
var controlf7 = 110;
var ende7 = 238;
var endf7 = 125;

var e8 = 238;
var f8 = 125;
var controle8 = 230;
var controlf8 = 140;
var ende8 = 250;
var endf8 = 135;

var e9 = 250;
var f9 = 135;
var controle9 = 262;
var controlf9 = 135;
var ende9 = 262;
var endf9 = 150;

var e10 = 262;
var f10 = 150;
var controle10 = 265;
var controlf10 = 153;
var ende10 = 238;
var endf10 = 153;

//variables second I
var i = 225;
var j = 125;
var i2 = 225;
var j2 = 150;

var centerx2 = 225;
var centery2 = 115;
var radius2 = 2;

//variables g
var centerx3 = 125;
var centery3 = 212;
var radius3 = 15;

var k = 125;
var l = 226;
var k2 = 125;
var l2 = 250;

var centerx4 = 125;
var centery4 = 275;
var radius4 = 25;

//letter o
var centerx5 = 162;
var centery5 = 237;
var radius5 = 12;

var centerx6 = 193;
var centery6 = 237;
var radius6 = 12;

//letter d
var centerx7 = 224;
var centery7 = 237;
var radius7 = 12;

var m = 236;
var n = 200;
var m2 = 236;
var n2 = 250;

//background variables
var startxx = 0;
var startyy = 0;
var width = 800;
var height = 600;
var grdstartxx = 400;
var grdstartyy = 100;
var grdendxxx = 400;
var grdendyyy = 500;

//variables for bottom boat
var o = 225;
var p = 500;
var o2 = 515;
var p2 = 500;

var o3 = 225;
var p3 = 500;
var controlo4 = 400;
var controlp4 = 675;
var endo5 = 515;
var endp5 = 500;

//variables for period
var centerx9 = 250;
var centery9 = 250;
var radius9 = 2;

//variables for clouds
var q = 550;
var r = 50;
var controlq = 505;
var controlr = 35;
var endq = 525;
var endr = 75;

var q2 = 525;
var r2 = 75;
var controlq2 = 510;
var controlr2 = 110;
var endq2 = 550;
var endr2 = 100;

var q3 = 550;
var r3 = 100;
var controlq3 = 580;
var controlr3 = 118;
var endq3 = 600;
var endr3 = 100;

var q4 = 600;
var r4 = 100;
var controlq4 = 640;
var controlr4 = 100;
var endq4 = 625;
var endr4 = 75;

var q5 = 625;
var r5 = 75;
var controlq5 = 640;
var controlr5 = 45;
var endq5 = 600;
var endr5 = 50;

var q6 = 600;
var r6 = 50;
var controlq6 = 575;
var controlr6 = 25;
var endq6 = 550;
var endr6 = 50;

//variables boat 3d
var s = 225;
var t = 500;
var controls = 355;
var controlt = 450;
var ends = 515;
var endt = 500;

//variable for cloud two
var q7 = 750;
var r7 = 25;
var controlq7 = 715;
var controlr7 = 30;
var endq7 = 750;
var endr7 = 75;

var q8 = 750;
var r8 = 75;
var controlq8 = 725;
var controlr8 = 105;
var endq8 = 775;
var endr8 = 100;

var q9 = 750;
var r9 = 25;
var controlq9 = 775;
var controlr9 = 0;
var endq9 = 800;
var endr9 = 50;

var q10 = 775;
var r10 = 100;
var controlq10 = 798;
var controlr10 = 0;
var endq10 = 798;
var endr10 = 115;

//variables for wave
var g = 50;
var h = 475;
var controlg = 75;
var controlh = 425;
var controlg2 = 150;
var controlh2 = 475;
var endg = 200;
var endh = 425;

var gg = 600;
var hh = 550;
var controlgg = 650;
var controlhh = 500;
var controlgg2 = 725;
var controlhh2 = 550;
var endgg = 750;
var endhh = 500;

//background
context.beginPath();
context.rect(startxx, startyy, width, height);
var grd = context.createLinearGradient(grdstartxx, grdstartyy, grdendxxx, grdendyyy);
grd.addColorStop(0, 'rgb(150, 150, 255)');
grd.addColorStop(1, 'rgb(0, 0, 150)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();

//boat 3d
context.beginPath();
context.moveTo(s, t);
context.quadraticCurveTo(controls, controlt, ends, endt);
context.lineWidth = 10;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();

//line one
context.beginPath();
context.moveTo(x, y);
context.lineTo(x2, y2);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//line diagnol left
context.beginPath();
context.moveTo(x3, y3);
context.lineTo(x4, y4);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//line first sail
context.beginPath();
context.moveTo(x5, y5);
context.lineTo(x6, y6);
context.lineWidth = 10;
context.lineCap = 'round';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//bezier curve for other sail
context.beginPath();
context.moveTo(x7, y7);
context.bezierCurveTo(controlx2, controly2, controlx3, controly3, endx7, endy7);
context.stroke();
context.closePath();

//line bezier curve right
context.beginPath();
context.moveTo(x8, y8);
context.bezierCurveTo(controlx4, controly4, controlx5, controly5, endx8, endy8);
context.stroke();
context.closePath();

//letter f
context.beginPath();
context.moveTo(a, b);
context.lineTo(a2, b2);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(a3, b3);
context.lineTo(a4, b4);
context.lineWidth = 5;
context.stroke();
context.closePath();

//close line second sail
context.beginPath();
context.moveTo(c, d);
context.lineTo(c2, d2);
context.lineWidth = 10;
context.stroke();
context.closePath();

//letter i

context.beginPath();
context.moveTo(c3, d3);
context.lineTo(c4, d4);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//letter f
context.beginPath();
context.moveTo(c5, d5);
context.lineTo(c6, d6);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(c7, d7);
context.quadraticCurveTo(controlc, controld, endc, endd);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(c8, d8);
context.lineTo(c9, d9);
context.lineWidth = 5;
context.stroke();
context.closePath();

//letter e
context.beginPath();
context.moveTo(e, f);
context.quadraticCurveTo(controle, controlf, ende, endf);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e2, f2);
context.quadraticCurveTo(controle2, controlf2, ende2, endf2);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e3, f3);
context.lineTo(e4, f4);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(e5, f5);
context.quadraticCurveTo(controle5, controlf5, ende5, endf5);
context.stroke();
context.lineJoin = 'round';
context.closePath();

context.beginPath();
context.moveTo(e6, f6);
context.quadraticCurveTo(controle6, controlf6, ende6, endf6);
context.lineJoin = 'round';
context.stroke();

//letter s
context.moveTo(e7, f7);
context.quadraticCurveTo(controle7, controlf7, ende7, endf7);
context.stroke();
context.lineJoin = 'round';

context.moveTo(e8, f8);
context.quadraticCurveTo(controle8, controlf8, ende8, endf8);
context.stroke();
context.lineJoin = 'round';

context.moveTo(e9, f9);
context.quadraticCurveTo(controle9, controlf9, ende9, endf9);
context.stroke();

context.moveTo(e10, f10);
context.quadraticCurveTo(controle10, controlf10, ende10, endf10);
context.stroke();
context.closePath();

//letter g
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(k, l);
context.lineTo(k2, l2);
context.lineWidth = 5;
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//letter O
context.beginPath();
context.arc(centerx5, centery5, radius5, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.arc(centerx6, centery6, radius6, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

//letter d
context.beginPath();
context.arc(centerx7, centery7, radius7, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(m, n);
context.lineTo(m2,n2);
context.lineWidth = 5;
context.stroke();
context.closePath();

//letter second I

context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, false);
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(i, j);
context.lineTo(i2, j2);
context.lineWidth = 5;
context.stroke();
context.closePath();

//period
context.beginPath();
context.arc(centerx9, centery9, radius9, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.closePath();

//bottom of boat
context.beginPath();
context.moveTo(o, p);
context.lineTo(o2, p2);
context.lineWidth = 10;
context.closePath();
context.fill();
context.fillStyle = 'rgb(200, 150, 200)';
context.stroke();

context.beginPath();
context.moveTo(o3, p3);
context.quadraticCurveTo(controlo4, controlp4, endo5, endp5);
context.closePath();
context.fillStyle = 'rgb(180, 150, 180)';
context.fill();
context.strokeStyle = 'rgb(200, 150, 200)';
context.stroke();

//clouds
context.beginPath();
context.moveTo(q, r);
context.quadraticCurveTo(controlq, controlr, endq, endr);
context.closePath();
context.lineWidth = 62;
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q2, r2);
context.quadraticCurveTo(controlq2, controlr2, endq2, endr2);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(q3, r3);
context.quadraticCurveTo(controlq3, controlr3, endq3, endr3);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q4, r4);
context.quadraticCurveTo(controlq4, controlr4, endq4, endr4);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q5, r5);
context.quadraticCurveTo(controlq5, controlr5, endq5, endr5);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(q6, r6);
context.quadraticCurveTo(controlq6, controlr6, endq6, endr6);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

//clouds round two
context.beginPath();
context.moveTo(q7, r7);
context.quadraticCurveTo(controlq7, controlr7, endq7, endr7);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q8, r8);
context.quadraticCurveTo(controlq8, controlr8, endq8, endr8);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q9, r9);
context.quadraticCurveTo(controlq9, controlr9, endq9, endr9);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

context.beginPath();
context.moveTo(q10, r10);
context.quadraticCurveTo(controlq10, controlr10, endq10, endr10);
context.closePath();
context.lineWidth = 60;
context.fillStyle= 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

//waves
context.beginPath();
context.moveTo(g, h);
context.bezierCurveTo(controlg, controlh, controlg2, controlh2, endg, endh);
context.lineWidth= 2;
context.strokeStyle = 'rgb(0, 0, 255)';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(gg, hh);
context.bezierCurveTo(controlgg, controlhh, controlgg2, controlhh2, endgg, endhh);
context.lineWidth= 2;
context.strokeStyle = 'rgb(0, 0, 255)';
context.stroke();
context.closePath();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Tuesday, February 24, 2015

Vector Illustration

Tuesday, February 17, 2015

Exquisite Corpse

Monday, February 9, 2015

Logo Design

This is my final logo design. It's designed for a (online and local) Surf Shop called Vibes. I chose this design for my logo because when most people think surfing they think of tropical climates (the beach, palm tress, waves, etc.). I chose to do the palm tree since the shop theoretically would also be online you want a universal symbol that everyone would understand. I was originally going to do the "hang-loose" hand gesture but that may be interpreted differently in various locations so I decided to go with a more basic route. I designed the palm trees with more jagged and mechanical shapes with a little organic feel with the palm tree. My lines were also complete lines so there's no need to interpret the point I'm trying to get across. I chose to make the leaves of the palm tree a vibrant green to catch peoples eyes and I stuck to the true color of leaves so my audience wasn't left guessing. I then made the trunk of the tree a shade of brownish/grey and combined the trunk into the circle outline to have a finished flow. I stuck to earthy colors to represent the outdoors. I chose to put the name of the store, Vibes, at the bottom of the logo with a fun font with squiggles to hint towards the idea of water. I also used the wave affect on the font to allude to the idea of waves and the ocean because that's where you surf. I didn't think it was necessary for the name being seen from far away, as long as the logo itself becomes recognisable. I tried to keep my logo fairly simple so that people wouldn't get confused, overwhelmed, and can see it clearly from a farther distance.

Wednesday, February 4, 2015

Caligramme

Wednesday, January 28, 2015

Logo Sketches

Logo Critique

Olympic Rings:

The color of the rings symbolize the colors of the countries participating in the games at the time when the olympics first started. However, there are new countries that are no longer accounted for so they may want to consider redesigning the logo but I can also see how it's a touchy area since they haven't been changed since the original design and it's a global symbol that everyone is accustomed to which is a good goal for any logo. The olympic rings are known around the world, which is an outstanding achievement to be recognized. Overall, I think this logo is a good fit.

Nike:

The Nike logo is also a well established symbol marketing for shoes and athletic clothing. I never really understood where the symbol originated besides the fast it was a well-known swoosh. I later figured out that Nike is named after the Greek Goddess of victory. The wings of the goddess is what the swoosh represents and how it's seen to be positive and uplifting. Knowing this, I think the logo suits the company well because to be an athlete you wan't something that makes you feel good, look good, and compete well. However, not knowing the meaning of the symbol and never hearing of Nike you may question what the company represents but the marketing team took a creative route with a background story that symbolizes their products effectively.

Surf Shop:

Looking at this surf shop logo, I particularly feel as though they did a good job designing their logo because it says what the store is, and they use a surfboard to depict what the store focuses on. I wouldn't change anything about this logo because it is vert simple and to the point and the audience will be able to distinguish what the company is and it'll draw in their targeted customers.

Canon:

Their logo is simply their name which is effective and simple. Keeping the logo as just the company name doesn't leave people guessing what their products are and looks very professional. My only critiques would be to add some creativity to the writing or hint subtly at what the products are (cameras).

Coca- Cola:

Their logo is also simple and has evolved over time and simply has refrained to just the brand name, "Coca-Cola." I like the style of the font it's very loose and flawy and gives it a relaxed and refreshing vibe which the company aims for the drink itself to give it's customers.

Tuesday, January 27, 2015

Logo Ideas

(1) Travel Company
Goals: to convince people that traveling/exploring is a eyeopening experience. I could portray this idea by having footprints on a globe showing different destinations.

(2) Music Producer
Goals: To show that the producers will produce music that people and the artist love to create and hear. I can use a microphone and instead of released music notes it could release hearts to show their artists are passionate about the music they create.

(3)Surf Shop
Goals: To show that the surf shop is a relaxed environment that'll supply them with surfboards, wetsuits, etc. I could use the "hang-loose" hand gesture as a symbol.

(4) Camera Company
Goals: to show how capturing a image can make the moment last for a life time and passing it on throughout generations makes memories live on. The importance of living in the moment and being creative. I could create a logo that shows the flash of a camera with the words "lasts a lifetime" to show how pictures document milestones in your life.

(5) Camping Company
Goals: Show that the camping products are the most efficient and durable during any weather conditions. I could use a picture of a tent and show the wind swirls blowing by with a star above the tent to show that it's still centered and not falling over with the weather patterns.

Wednesday, January 21, 2015

About Me

My name is Sarah Cirelli, I am currently a freshman at the University of Tampa. I am majoring in Communications with a minor in Marketing. I am originally from Connecticut and have begun my journey in Tampa. I have taking a graphic design class and played around with photoshop in my past, but with this class I hope to get a nice refresher on the software. I also wish to acquire more skills in various editing programs and really put my creativity to the test.

Sarah's Art Blog