Sunday, March 31, 2019

Illustrator Tutorials

1. https://helpx.adobe.com/illustrator/tutorials.html
This is a helpful tutorials. There are several topics and easy to understand videos with different levels to choose from. These from adobe are helpful with any software. 

I use these tutorials for photoshop as well. It is easy to understand with pictures, and videos. This is a good one.

3. https://www.tutpad.com/tutorials/illustration-create-a-mexican-food-icon-set
I liked these because they are all by different people with different ways of explaining things. 
Posted by at No comments:

Photoshop CC Tutorials

1. https://helpx.adobe.com/photoshop/tutorials.html
I liked this Adobe tutorial because it has many links you can click on for whatever your looking for. It is also divided by beginner and experience which is helpful. There are videos as well as text which make it easy to understand and that is why I liked this tutorial.

2. https://www.guru99.com/introduction-to-photoshop-cc.html
This tutorial is from Guru which is also helpful. They explain it in a different way but there also also a lot of links to choose from like in the above link. I found this one helpful.

3. https://www.creativebloq.com/graphic-design-tips/photoshop-tutorials-1232677
These are a bunch of tutorials on how to do things in photoshop with videos as well. Found this very helpful.


Posted by at No comments:

Monday, March 25, 2019

POSTER

This is the poster that I made. I chose to make a poster about saving the earth. I wanted it to be subtle but also get a point across. The point that there is no planet B so we can not destroy the one we already live in.
Posted by at No comments:

Monday, March 18, 2019

Gradient Mesh



This is my gradient mesh project. I chose to do a green apple. I tried to look for an apple that displayed many highlighted parts, and this is the best one I could find. Getting the perfect gradient mesh points was harder than I anticipated but it was still a cool thing to learn and create.  This took me about 2 hours to complete.
Posted by at No comments:

Monday, March 4, 2019

Final Logos


These are my final logos. I went with the more modern look of my initials. I used three different types of color schemes to create a personal logo. I am happy with how they came out. To create just these logos it took me about 2 hours.
Posted by at No comments:

Thursday, February 21, 2019

Calligram Final




For my calligram project I chose to do the song "You Say" by Lauren Daigle. This is one of my favorite songs right now and spoke to me. When I heard this song, it reminded me of the symbol of an anchor. Symbolizing stability and strength. I added some colors just so it was not so plain. When I converted the file It took some words out, and I am not sure why it did that. This took me about 3 hours to complete.

Posted by at No comments:

Tuesday, February 12, 2019

Boat Scene - Canvas Final














Hours:15

My final for the canvas project is an ocean scene. I was trying to figure out things that I could create and when I was driving past Bayshore is when I got my idea. My project is made out of several shapes and colors. I really tried to give the water some dimension and that is why there are so many lines and a variety of color. This was the hardest thing I have ever done. Even creating a simple boat was harder than I was expecting. It took me so long and I tried my hardest to give it a more realistic view, but I honestly did not know how. I am happy with my background as simple as it is along with the base of my boat.  I am so glad this is done. I did learn a lot about the software and coding in general, but I am happy to never do this again.




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

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

//backckground
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);

// radial gradient
var grd = context.createRadialGradient(200, 57, 15, 238, 50, 310);
grd.addColorStop(0, 'rgb(250, 252, 137 )');
grd.addColorStop(.27, 'rgb(255, 255, 128)');
grd.addColorStop(1, 'rgb(122, 203, 250)');

context.fillStyle = grd;
context.fill();



// starting point coordinates Wave 1
var startX = 0;
var startY = canvas.height/1.1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 300;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 20;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();

// Wave 2
var startX = 0;
var startY = canvas.height/1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 2;
var cpointY1 = canvas.height / 1.5 +10;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / .9;

//wave
    var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 20;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();


    
// wave 3
var startX = 0;
var startY = canvas.height/1.1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 8;
var cpointY1 = canvas.height / 2 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.95;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);

context.lineWidth = 17;
context.strokeStyle = "rgb(2, 68, 164 )"
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
    

        
//wave 4
    var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 20;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();


// wave 5
var startX = 0;
var startY = canvas.height/1.23;

// control point coordinates ( magnet )
var cpointX = canvas.width / 3.5;
var cpointY = canvas.height / 1.7 + 345;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.077;


context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endY, endX);

context.lineWidth = 10;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();


    //wave 6
var startX = 0;
var startY = canvas.height/1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.8 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.90;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);

context.lineWidth = 17;
context.strokeStyle = "rgb(51, 133, 255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
    
// wave 7
var startX = 0;
var startY = canvas.height/1.32;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2 - 3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 15;
context.strokeStyle = "rgb(70,130,180)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();

    
// wave 8
var startX = 0;
var startY = canvas.height/1.2;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3;
var cpointY1 = canvas.height / 1 + 10;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height /1;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1.2;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 24;
context.strokeStyle = "rgb(2, 68, 164 )";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();

    
//wave 9
    var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 18;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();       
    
    
    
//WAVE 10   
var startX = 0;
var startY = canvas.height/.98;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 2;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 15;
context.strokeStyle = "rgb( 2, 68, 164 )";
context.stroke();   

        
//wave 11
    var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 18;
context.strokeStyle = "rgb(0,155,255)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
    
//wave 12   
var startX = 0;
var startY = canvas.height/1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.9;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 10;
context.strokeStyle = "rgb(2, 68, 164)";
context.stroke();   
    
//Wave 13
var startX = 0;
var startY = canvas.height/1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 15;
context.strokeStyle = "rgb(51, 133, 255)";
context.stroke();   

    
//wave 14   
var startX = 0;
var startY = canvas.height/1.4;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 1.5 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 1;
var cpointY2 = canvas.height / 2 - 3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 15;
context.strokeStyle = "rgb(70,130,180)";
context.fillStyle = 'rgb(25,25,112 )';
context.fill();
context.stroke();
    
//wave 15   
var startX = 0;
var startY = canvas.height/1.1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 1.6;
var cpointY1 = canvas.height / 1 + 10;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height /2;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/1.2;

//wave 16
var startX = 0;
var startY = canvas.height/1;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 5;
var cpointY1 = canvas.height / 1.8 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2-3;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/.90;


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointY2, cpointY2, endX, endY);

context.lineWidth = 10;
context.strokeStyle = "rgb(51, 133, 255)";
context.stroke();

    
//// boat base  
context.beginPath();
context.arc(canvas.width/2.5, canvas.height/1.8, 200, Math.PI*0.2, Math.PI*0.8, false);
context.lineWidth = 2;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = 'rgb(188, 54, 54 )';
context.fill();
context.stroke();
context.counterclockwise
    
    
//boat wood mark middle
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(187,480);
ctx.lineTo(452,480);
context.strokeStyle = "rgb( 102, 72, 72 )"; 
ctx.stroke();

// boat lines top   
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(474,460);
ctx.lineTo(170,460);
context.strokeStyle = "rgb( 102, 72, 72 )"; 
ctx.stroke();

// boat lines 3 3rd 
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(429,500);
ctx.lineTo(213,500);
context.strokeStyle = "rgb( 102, 72, 72 )"; 
ctx.stroke();
    
// boat lines 4th   
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(406,511);
ctx.lineTo(231,510);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();
        
// boat lines 5th   
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(186,470);
ctx.lineTo(460,471);
context.strokeStyle = "rgb( 102, 72, 72 )";
ctx.stroke();   
    
//lines second from bottom
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(200,490);
ctx.lineTo(446,492);
context.strokeStyle = "rgb( 102, 72, 72 )"; 
ctx.stroke();   
    
//text
context.beginPath();
context.font='bold 16pt Apple Chancery';
context.fillStyle="rgb(255, 252, 252)";
context.fillText("S.S.",260,500);
context.beginPath();
context.font = 'bold 16pt Apple Chancery';
context.fillText('Madison', 298, 500);
context.beginPath();
context.font= 'italic 25pt Comic Sans MS';
context.closePath();    
    
//diagonal line sail
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(323,293);
ctx.lineTo(400,403);
context.strokeStyle = "rgb(188, 54, 54 )";
context.lineWidth = 4;
ctx.stroke();   

//bottom of sail
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(319,400);
ctx.lineTo(401,403);
context.strokeStyle = "rgb( 188, 54, 54 )"; 
ctx.stroke();

//bottom of sail long
context.beginPath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(180,400);
ctx.lineTo(400,403);
context.strokeStyle = "rgb(188, 54, 54 )";
ctx.stroke();   
    
//diagonal line sail long
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(318,223);
ctx.lineTo(180,400);
context.strokeStyle = "rgb( 188, 54, 54)";
context.lineWidth = 4;
ctx.stroke();   
    
    
    
context.beginPath();
// Start from the top-left point.
context.moveTo(319, 220); // give the (x,y) coordinates
context.lineTo(180, 400);
context.lineTo(455, 400);
context.lineTo(320, 291);

context.fill();
context.stroke();
context.closePath();

    
//vertical line middle
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(320,220);
ctx.lineTo(320,480);
context.strokeStyle = "rgb(188, 54, 54 )";  
ctx.stroke();
    
    
    
    
    
    
    
    
    

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

};

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

Posted by at No comments:
Subscribe to: Posts (Atom)