tag:blogger.com,1999:blog-86486229331594012982024-02-19T17:45:40.166-08:00Exploring my Art BrainThe art blog of Simon Peter Raphael Harris. This blog includes my exploration through all the different parts of art I enjoy and includes some finished work along with the process of it coming along. Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.comBlogger57125tag:blogger.com,1999:blog-8648622933159401298.post-28258385029002712032013-01-08T10:54:00.000-08:002013-01-08T10:54:14.233-08:00THe king<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dlTpuviCzemqrjVGL7Y0yfMvMMA-BH-eREFByAAVnF8__jexXqSAMXugqbQOHs10ogitUkb5PyfNB9av_EP9WTXE3P3PaSQpu3inDyk40DLd1cJlZ-mrDS1qT0E3VQT98HKWkquGWvA/s1600/photo.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_dlTpuviCzemqrjVGL7Y0yfMvMMA-BH-eREFByAAVnF8__jexXqSAMXugqbQOHs10ogitUkb5PyfNB9av_EP9WTXE3P3PaSQpu3inDyk40DLd1cJlZ-mrDS1qT0E3VQT98HKWkquGWvA/s640/photo.jpeg" width="478" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
So I want to make some characters for a game I'm making and I wanted to see how I could render this character for use in a game. Here is my starting sketch and first I'm going to do a 2D version of him with illustrator. I chose this guy from all my other sketches because of his intricate patterns and it will be cool to see how I can make a character that moves and even battles but also maintains the patterns this guy has in him. </div>
<br />Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-85247606769080120382012-09-19T20:37:00.001-07:002012-09-20T10:46:23.562-07:00Parallax tutorialHey guys so after seeing all those parallax type sites I wanted to learn how to do it. I found one tutorial that really helped <a href="http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/" target="_blank">here</a>. This is where I got all my info from. But I wanted to go over it here in my blog as well so there will be 2 tutorials on how to use this. First we have to get set up.<br />
<br />
<h2>
Set Up</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXhVTdLFq6VICOjJVdCevXcwP9UlU5Fq0N4cJc0WO3nx9JqV1YD7Oe2xqOEj7aT3ckA0scKsGEWfD0nMkbMLSAfSK2on9Vax4CfWQoKX913aUZDvYt-Xl68wFuJPw2jZZiqTB2pLxN_k/s1600/FolderSetUp.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXhVTdLFq6VICOjJVdCevXcwP9UlU5Fq0N4cJc0WO3nx9JqV1YD7Oe2xqOEj7aT3ckA0scKsGEWfD0nMkbMLSAfSK2on9Vax4CfWQoKX913aUZDvYt-Xl68wFuJPw2jZZiqTB2pLxN_k/s400/FolderSetUp.png" width="400" /></a></div>
<div>
So first of all this effect I thought was just html5 because a lot of different sites i found said that is all it takes. Too bad that isn't true It takes some jQuery to actually make it work right. So first make a main folder for your site like you usually would. Inside that folder you need a folder from the files you download <a href="http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/" target="_blank">here</a>. Just click the download source files. It is mainly the js folder you will want from this folder if you want to do this tutorial. You can just copy and paste that folder into your site folder. then of course make the other folders you would usually make like "images" and "css". You can refer to my pic to make sure your site folder looks right. Like normal you make your main page named "index.html" and make a style sheet for your css and save it in the "css" folder.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
The HTML</h2>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjMQwW-nDQPHurFq9AxK1NCFMKlvaQrXh5t_nJCTi3TtLUg_xTdsBPgNXcrVZbsKhZv34Q9KdngEWbIbL-hOViC4PkzgTxYqwV0LbIqR6w9jl62nCfC1NRY33vSI-yL03eArDeJXPvEhQ/s1600/header.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjMQwW-nDQPHurFq9AxK1NCFMKlvaQrXh5t_nJCTi3TtLUg_xTdsBPgNXcrVZbsKhZv34Q9KdngEWbIbL-hOViC4PkzgTxYqwV0LbIqR6w9jl62nCfC1NRY33vSI-yL03eArDeJXPvEhQ/s640/header.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Ok so lets look at this. I tried to add notes so you could follow along. I know some of these bigger sections of code might be hard to read though so look at the end of this post and you can get <a href="https://docs.google.com/open?id=0B3S7qz4m893cbXMxZndtMlVPNlE">my html</a> and <a href="https://docs.google.com/open?id=0B3S7qz4m893cbzd6S3J4M0Nha0E">CSS</a> if you want to see it a bit better. You start your html pretty averagely in the header the only thing is that you need to import all those lovely .js files we just put in your "js" folder. As you see on line 7 we link to a css sheet online called CSSReset. we do that becuase it gets rid of any default line widths font width anything like that. pretty much it gives us a very clean slate to work with in our styles. Then in line 9 we link our own style sheet that we have saved in the css folder in our sites main folder. If you look you can see I named mine "styleSheet.css". </div>
<div class="separator" style="clear: both; text-align: left;">
After we link our style sheets we import the jQuery (which is technically javascript thus the .js in the end of every file name). we do this in lines 11,12,14,16,18. those lines are all linking to our .js files in that js folder. The tag starts with script to let it know you are about to give it some script to use. then you tell it the type you of script you are about to give it. in our case it is "text/javascript" which means it is a text file that is a javascript file. then we tell it the source or "src" in code language. This is just the location where it can find the text/javascript file we are telling it to look for. If we look at line 11 we are telling it to find a file online so we gave it the files url. In line 11 we have the file here in our js folder so we just tell it to look in the "js" folder and find a file named "js.js"in code language that looks like "js/js.js". lines 12,14,16, and 18 just repeat the proicess and tell it to find all the other files in the "js" folder.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Lets move onto the body of our page.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDruXXCLEsjL-v_rySt_AF5I-fZJsvBhmPUgk2zVGTjSbI_00VMuLGs5TGpB2m4QR_pH6v8qyHauDDW1yh26EeXIeHZ5PMW58scOBN1lmHmgbH08hqg3Zf3O7FMFlL85eGQc_ugcIAEo/s1600/body.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="539" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDruXXCLEsjL-v_rySt_AF5I-fZJsvBhmPUgk2zVGTjSbI_00VMuLGs5TGpB2m4QR_pH6v8qyHauDDW1yh26EeXIeHZ5PMW58scOBN1lmHmgbH08hqg3Zf3O7FMFlL85eGQc_ugcIAEo/s640/body.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I hope that is readable, again I included notes. Here we go so the first thing i do in the body is I put my logo or really anything that I want to remain fixed to the browser window and not scroll with everything else. Examples of this would be navigation or logo. In my case for the sake of this tutorial Im focusing on just the parallax effect I'll do navigation in a parallax site in another tutorial. So I'm just going to put my logo here so that we have an example of something that stays fixed. I do that with the img tag but notice I give it a class "mainlogo" yours doesn't need to be named the same as mine but this name will be what we use to refer to it in our CSS when we get to styling it so name it something logical so you can remember what it is you are styling later. next I start a a div this div is going to contain everything I want on that first slide so I am going to give it the class of "slide" because in my CSS I'll give it some style rules that will apply to every slide. Then I give it an id of "slide1" I do this because later when I am doing my CSS I might want to give this slide some unique styles. I gave it the data-slide name of 1 and this will come in handy when I add navigation to this in my next tutorial. But for now lets just leave that in there and not worry about it. lastly I gave the div a cool effect called data-stellar-background-ratio this makes it so when we scroll the slide itself doesn't scroll quite as fast so that our parallax-ing objects will have time to do all their great movement before they hit the next slide. setting at .5 means we are going half the normal scroll speed.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ok so inside our "slide1" div we have one more div this one is called "wrapper" and wrapper is where all our images are going to be stored that we want to parallax. mainly the wrapper div will serve as our way of making sure all our content remains in the middle of our page even when the users move their window size around. We'll make sure it does that once we get to our CSS. But for now lets put all our images in. Just like normal we start by opening the img tag and then giving it a src so that the html will know where the image file is. But then we add a little more to it and this is possible because in our header we linked those ".js" files. first we give the image what is called a "data-stellar-ratio" this tells the image how fast it should scroll. if we give it a decimal value like ".75" then it will scroll at only 75% of the speed it normally does but if we give it a value hire than 1 it will scroll faster than normal. For example if we give it a 3 as its value then it will scroll at 300% or 3 times as fast as normal. It is because we assign everything a different value in the data-stellar-ratio that we have the parallax effect. slower scrolling things will look farther away while faster things will look closer. Taking that into account make sure that in your objects stacking order the images further down the list go faster than the things at the beginning of your list or else you might run into problems where something is scrolling up faster but goes behind something scrolling slower and destroys your parallax depth effect. I did one slide with notes and then a second slide without notes so you can see a little better what your code might look like.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Finally after I closed my "wrapper" div I included some things that I wanted to just scroll normally with the slide with no parallax. I put a span where I would include the pages title and gave it the class "slideno" So that in my CSS I can stylize all the things that I want to keep with the page the same and add some continuity to the site. I then added a link that will in my later tutorial become a button that you can push to auto slide to the next page. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2>
The CSS</h2>
<div>
So now we hit the css. here we will do things like make your page fill the browser, center your content, and position all of your content. Lets hit it one piece at a time</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xXkg9Nnwlq90_a1M8Brq0OuQDkeQ-PVHg8nNGK8yT3NgwBtxI2dD3XFU3jep5xrZiZg_1jc3ACZtyS2miouhKivA1GjoKB6U3hZUZwPCeIeqV72a3ERkWAgfxlFaVbHiiY7xLg5yMwg/s1600/Screen+Shot+2012-09-19+at+8.32.07+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xXkg9Nnwlq90_a1M8Brq0OuQDkeQ-PVHg8nNGK8yT3NgwBtxI2dD3XFU3jep5xrZiZg_1jc3ACZtyS2miouhKivA1GjoKB6U3hZUZwPCeIeqV72a3ERkWAgfxlFaVbHiiY7xLg5yMwg/s1600/Screen+Shot+2012-09-19+at+8.32.07+PM.png" /></a></div>
<div>
First the body. This is simple CSS it makes it so your page fills the browser window no matter the size which is really handy because people make their browsers all sorts of sizes.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7nYddcXKZwN5qmzQMQv6WuFHxUnfipkpI38q2xzD6aLG7iXCAuhINUEP_9kG9GH4kkV1WHTe_4qJ7ihXpnw29ZgoYgHdyOwEvGSi7esBnQfJ_GRIlFZbbbWoVp_edVfTMhNQYxR5keA/s1600/Screen+Shot+2012-09-19+at+8.37.32+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7nYddcXKZwN5qmzQMQv6WuFHxUnfipkpI38q2xzD6aLG7iXCAuhINUEP_9kG9GH4kkV1WHTe_4qJ7ihXpnw29ZgoYgHdyOwEvGSi7esBnQfJ_GRIlFZbbbWoVp_edVfTMhNQYxR5keA/s1600/Screen+Shot+2012-09-19+at+8.37.32+PM.png" /></a></div>
<div>
Next I'm going to position the things that I want fixed to the browser. Remember in my html code I gave my Logo a class named "mainlogo"? well I use that same name here. The "." tells CSS that im about to stylize a class and the name "mainlogo" means anything that I named "mainlogo" in my html will get this same style. in this case only my logo image was given that class so it will only effect that one thing. So here I give it a fixed position and that snaps it to my browser so even if I scroll it doesn't care it will stay in the spot I tell it. In this case I told it to go 20 pixels from the top and 20 pixels from the right. I also gave ti a z-index of 1 because that will bring it on top of everything else. that way when I scroll down my content will never overlap my logo. That is especially good with navs cause you always want your nav to be on top.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhJdG_lSCxBoIlFUZocLqHdYAA9GvyzfFXNcLc4O1AMuCPQTB9RAhjh9YRLH-P4iZ66aOc7oAjXC1CQPT87GpgMTY5CXNWRCafx8zcBxDs-UdFjYN9mEK5h4lLu78l05lXZGQ1ZaMRws/s1600/Screen+Shot+2012-09-19+at+8.55.17+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhJdG_lSCxBoIlFUZocLqHdYAA9GvyzfFXNcLc4O1AMuCPQTB9RAhjh9YRLH-P4iZ66aOc7oAjXC1CQPT87GpgMTY5CXNWRCafx8zcBxDs-UdFjYN9mEK5h4lLu78l05lXZGQ1ZaMRws/s1600/Screen+Shot+2012-09-19+at+8.55.17+PM.png" /></a></div>
<div>
Here we start to build the bones to our slides. First we customize the "slide" class so if we gave every slide we made the class of "slide" then this will apply to them all. Same applies when we customize our "wrapper" and our "slideno"classes if you look below. So in our "slide" class first we make it so our background- attachment is fixed. This is if you want your background of each slide to appear as if it isn't moving. Instead it just disappears behind the next slide kinda. If you want the background to move then make this absolute. then we specify how big we want the slide to be and to tell the truth I can't think of a time you wouldn't want it to fill the screen so I'm putting it at 100% because then the slide will always fill the window. We want this to be relative to give the wrapper something to base itself on when we position it. After that we give the slide a drop shadow just for effects for when we scroll onto the next page.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEftS7pT-gRhYcLeYvyeqX-tSnsCN0GmDyo3vyNoiY3XWLNIFVlBkqB8Ub2fCU-jcdniuVCt09oxhGz2FHZEtieuEdxFdfxcCUW4Ur3daE1k9H6zo9-opZZtN6Krpi3-Oabhm35SQv7u0/s1600/Screen+Shot+2012-09-19+at+8.55.31+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEftS7pT-gRhYcLeYvyeqX-tSnsCN0GmDyo3vyNoiY3XWLNIFVlBkqB8Ub2fCU-jcdniuVCt09oxhGz2FHZEtieuEdxFdfxcCUW4Ur3daE1k9H6zo9-opZZtN6Krpi3-Oabhm35SQv7u0/s1600/Screen+Shot+2012-09-19+at+8.55.31+PM.png" /></a></div>
<div>
Next we have the wrapper. Remember when I said this will help us center our content on the page? well this is where that all happens. First we set the width and this is really where we set the width of the heart of our page. for example this blog is centered in your browser. if you stretch your browser the middle section will stay in the middle and stay nice and designed. If you shrink it then It still says centered and designed right? so we are going to do that to our content on the slides. First we set the width to 960 pixels. We do 960 because that will accommodate for even the small monitors out there. we then do 200 pixels for the height and really I just chose 200 even though you could mess with the height to see what happens. then I give it a margin of 0 and auto, this centers it on the page. Then I make it relative and now it will start basing itself off the slide and stay with the slide. nice huh?</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJyCENejqqunqLvr42WCNHtAomGwBmdndsPlXG40qalNTvr2ekmcCXHGeKsaeVaRuC7NEboeSyZLXnJ7Ymx4WEfCVA0Htc1fclj-jF0SDnJhCJLMEtF2xWhpaDCkTj51vXOq_JhfxYl34/s1600/Screen+Shot+2012-09-19+at+8.55.38+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJyCENejqqunqLvr42WCNHtAomGwBmdndsPlXG40qalNTvr2ekmcCXHGeKsaeVaRuC7NEboeSyZLXnJ7Ymx4WEfCVA0Htc1fclj-jF0SDnJhCJLMEtF2xWhpaDCkTj51vXOq_JhfxYl34/s1600/Screen+Shot+2012-09-19+at+8.55.38+PM.png" /></a></div>
<div>
Here we customize the "slideno" class. This is for all that stuff you want to stay perfectly with the slide like page names are a great example. the most important part of this code is the position. we make it absolute and then it will stick to the slide we put it in. Then we tell it where to put this content and it will stay on that part of the slide unaffected by all the rest of your content.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntWHuMkFwKWnsQFaiO8pbr99-ebk3w3hyphenhyphen6UQlDghEHuSpzUeHiFmkjonvnudbTAhYjq6yCWOMwmdiPCFTgvBK5tEn8d7rSzrW1h3ZlMI3mPvP0FWoN9MaQVt9dBOCFBfMjzcYgQ6VoA0/s1600/Screen+Shot+2012-09-19+at+9.07.59+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntWHuMkFwKWnsQFaiO8pbr99-ebk3w3hyphenhyphen6UQlDghEHuSpzUeHiFmkjonvnudbTAhYjq6yCWOMwmdiPCFTgvBK5tEn8d7rSzrW1h3ZlMI3mPvP0FWoN9MaQVt9dBOCFBfMjzcYgQ6VoA0/s1600/Screen+Shot+2012-09-19+at+9.07.59+PM.png" /></a></div>
<h3>
Slides</h3>
<div>
So here we get to positioning the images on your page. This is where if you came prepared with a good digital comp of what you wanted to make, it becomes pretty easy. First we tell it we are stylizing slide 1. In our html we told it which div holds all our slide1 info because we gave it an id of "slide1". I wanted to give it a good background texture so I made one in photoShop and put it in a folder named slide1 inside my images folder. I then used the background-image and gave it the location of my background. Remember I said in my .slide class that I wanted the backgrounds fixed so when I scroll this image wont move at all but it will still disappear behind the next slide as I scroll down. I then start positioning each image within the slide1 div. Notice I can adress them by telling it the number of the child I want to position. This means I have to remember which image came first second third and so on in my html. I make them absolute which means positioning them won't be effected by the other children. So If I put 0,0 for all of them they will all be right on top each other. Here I can refer to my digital comp and find out how many pixels everything is from the top or side that way I can know which values to put into here. I would recommend using the same convention. Here I was experimenting with basing some off of the bottom right and some off of the top left. but If you do all your positioning from the same point it won't be quite as confusing most the time.</div>
<div>
<br /></div>
<div>
Once you have done that to one slide you can repeat the process for each slide. Just remember to change the name of "slide1" to the name of your next slide which for me is "slide2" you can repeat that process 100 times and make 100 slides if you want all stacked ont op each other. </div>
<div>
<br /></div>
<h2>
<span style="font-weight: normal;">Final Things</span></h2>
<div>
First of all I want to repeat that I learned all of this from the excellent tutorial by Aaron Lumsden which again you can find <a href="http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/" style="font-weight: normal;" target="_blank">here</a>. And he explains many things in better detail. I also want to put a bit of a disclaimer. If you view these parallax sites in chrome or safari once the top of your image leaves the screen it disappears till you scroll back. in firefox however it works perfectly fine. Really you only notice it if you are using very tall images. I am currently searching for a way to fix that so I will post yet a third tutorial if I can find out how to fix that. I hope this helps anyone who might be struggling with making this kind of a site. </div>
<div>
<br /></div>
<div>
View My CSS <a href="https://docs.google.com/open?id=0B3S7qz4m893cbzd6S3J4M0Nha0E" target="_blank">here</a></div>
<div>
View My Html <a href="https://docs.google.com/open?id=0B3S7qz4m893cbXMxZndtMlVPNlE" target="_blank">here</a></div>
<div>
<br /></div>
<div>
<br /></div>
Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-8442672661677178042012-08-31T12:31:00.000-07:002012-08-31T12:31:54.357-07:00The Grey Ghost<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLb0qJNn6prFNLJPcZ9JzfeP3Gli8DClgvqkZjoRQM7EpJkmNc-dHP6kcTOB0zhX9QOlrhVecnj7qBlOyL79VKobTBQsAWsuq58e5fQxOti0KRScfV6NLLyvXy_l0hc58tI3UD-Vh60s/s1600/the-grey-ghost.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLb0qJNn6prFNLJPcZ9JzfeP3Gli8DClgvqkZjoRQM7EpJkmNc-dHP6kcTOB0zhX9QOlrhVecnj7qBlOyL79VKobTBQsAWsuq58e5fQxOti0KRScfV6NLLyvXy_l0hc58tI3UD-Vh60s/s640/the-grey-ghost.jpg" width="414" /></a></div>
I always liked the 90s batman cartoon. I remembered the episode with the grey ghost in it but it had been a long time since I saw it so I looked it up and watched it again and yeah it is still an awesome episode! So I made this poster out of a screen shot I found as a tribute to bruce waynes childhood hero.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-65551848047785582462012-08-28T13:27:00.000-07:002012-08-28T13:27:00.602-07:00Great color combo<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdlRHUuflNh5zs9LqKVP_m_kSQoP2MQxXK6HAYKT09-9xTokUX9P0aGEySzYc30oti-zD_RmDE2u9xiiqXdCpm31S92V5b7SXMay9KzxylRff0PP8Bb9sSFt_p2rzztl7_QuoAY2WAUGA/s1600/Screen+Shot+2012-08-28+at+2.14.24+PM.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdlRHUuflNh5zs9LqKVP_m_kSQoP2MQxXK6HAYKT09-9xTokUX9P0aGEySzYc30oti-zD_RmDE2u9xiiqXdCpm31S92V5b7SXMay9KzxylRff0PP8Bb9sSFt_p2rzztl7_QuoAY2WAUGA/s400/Screen+Shot+2012-08-28+at+2.14.24+PM.png" width="400" /></a></div>
This is another one of those all on one page sites. I'm gonna call 'em scroll sites till i find out if there is a conventional name for them cause you do scrolling and alost they are like those big long scrolls messengers had back in castle times. Anyways this site:<br />
<br />
http://wickedpalate.com/<br />
<br />
Is definitely a scroll page. It is relatively flat but I think thats just cause I just went through a bunch of pages that felt like they had good depth to them. THe color choice was awesome though. The three colors of the witch hat cakes in the above picture are used throughout the entire site and with that egg shell 'ish color in the back it felt like a really artsy bakery the entire time which is what the site is advertising so good job designer of this site. I can also tell it was well colored because I now find myself wanting a bakery good with marzipan on it. The one thing I did want to point out and actually wanted to use this site to show a the importance of a seemingly small thing is that nave bar location. When you land on the page it works out fine as you can see in the screen shot it is right there and ready. but if you hit any of those nav buttons you get sent toward the bottom of the scroll and have to scroll back to the top of the page to find that nav bar again. Of course you can still access the info by just scrolling to it yourself but then that produces the problem of you aren not sure which section of the page you are on because there were few headings on this page. It is ok there weren't headings in a way because some of it is self explanatory but when designing a site the designer must design so that even the most computer illiterate person can still at least know where they are. Overall I liked the sites look the colors worked with the crafty photos near the bottom. It gave a very friendly personable feel. really that navigation is the only thing that is a hold back.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-17159467316077123232012-08-28T13:05:00.002-07:002012-08-28T13:05:27.720-07:00More Parallax! <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfMxNQTm-F1y3JcmsBNfPXW8RHOMgdhC6kLxZDB8tmaHjRnx4shyphenhypheniGzRoB_UEKJkY-3nCOSuh3gkD03dcjSJ9K_3ITENAofQMxYOr_DYfgzaRO1TYBH77EaJxgnJHt0frmFSz7lgN_mM/s1600/Screen+Shot+2012-08-28+at+1.54.07+PM.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfMxNQTm-F1y3JcmsBNfPXW8RHOMgdhC6kLxZDB8tmaHjRnx4shyphenhypheniGzRoB_UEKJkY-3nCOSuh3gkD03dcjSJ9K_3ITENAofQMxYOr_DYfgzaRO1TYBH77EaJxgnJHt0frmFSz7lgN_mM/s400/Screen+Shot+2012-08-28+at+1.54.07+PM.png" width="400" /></a></div>
<div style="text-align: left;">
Sweet candy corn this site does it too! here is the url if you want to check it out yourself:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
http://www.yurbuds.com/#/features</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
So just like the other site they use the parallax effect to be able to post big things that might not need as much attention as other things but thanks to the depth they go down in the ladder of hierarchy. This designer however used great repetition in with the branding these headphones already had. The navigation bar at the top (which follows you where ever you go) uses white and yellow, the colors used in the word mark of the logo, to show where you are and where you can go. They then use those same colors to establish headings and sub headings through out the page. with in the first second of looking at the page you can already pick up that white and yellow is what you are looking for any kind of navigation from finding out where you are to finding out how to get to where you want to be. Notice that the head phones them selves are red and black which are the two dominate colors of the entire site reinforcing the "awesome dominating power" of these head phones. I am also becoming some what of a fan of these pages that have all of their content on really just one super long page and then the navigation doesn't take you to another page it just scrolls you to the section on this long page that you want to view. I'm sure there is a word for it but i have yet to learn what it is. </div>
Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-8902416176736084172012-08-28T12:49:00.000-07:002012-08-28T12:49:55.070-07:00Cool Websites I found & Why they are cool<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJj_FliU9CIA-84hEJScMuK-qNBRy3g82Jg2Mvx1O7wPLUdbjB_6TdjkIFAtXaALEiqTJAIQhN3YCN8vqE1glCG2lSEloQGQygRGN7YrekbQl_lyI_MABj06EUdTYGECOgMQi5VGQtH4/s1600/Screen+Shot+2012-08-28+at+1.35.47+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoJj_FliU9CIA-84hEJScMuK-qNBRy3g82Jg2Mvx1O7wPLUdbjB_6TdjkIFAtXaALEiqTJAIQhN3YCN8vqE1glCG2lSEloQGQygRGN7YrekbQl_lyI_MABj06EUdTYGECOgMQi5VGQtH4/s640/Screen+Shot+2012-08-28+at+1.35.47+PM.png" width="640" /></a></div>
<br />
<br />
<br />
So I was given the assignment in my Graphics Interface Design class to find some cool websites and critique them. Pretty sweet gig if you ask me cause for me that means I get to get some inspiration. I'm starting with this site:<br />
<br />
http://www.vivascom.com.br/<br />
<br />
This is a site that seems to be a design firm site in Brasil But I don't know Portugese so I can't promise you thats what it is. As you can see from the screen shot above it has so cool imagery that was given plenty of room to breathe which is something I personally like in websites landing page because it really sets the mood for the whole site. If the landing page is designed well it helps the whole site feel a little more designed which helps make up for those pages that have a lot of content and is sometimes harder to design. BUt that isn't really the thing that got me pumped on this page. What got me here was the use of animation in scrolling. THey had 2 layers of background that moved separately from each other giving it a parallax view which gives your screen a 3d feel almost. If designers give a good sense of depth to a web page it makes a ton of difference the content seems more organized and gives you the ability to have huge colorful things that dont steal or mess up your hierarchy.<br />
<br />Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-22583114648312372022012-01-06T08:34:00.001-08:002012-01-06T08:35:15.310-08:00day 4<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieboEUlIvjrpaP12CkkXfh3KVsfN6C7BYr9h8NyUaKBycneMYi-KgQqFuQppO9H625MH5aP8O-8QXXNVyLnJZ5gtMn0CQ95anXtzcj3MbHKIfMWeK9mEj3N1_4z2xYJzNfOoqnNxeJ3k4/s1600/Screen+Shot+2012-01-06+at+9.33.42+AM.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 357px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieboEUlIvjrpaP12CkkXfh3KVsfN6C7BYr9h8NyUaKBycneMYi-KgQqFuQppO9H625MH5aP8O-8QXXNVyLnJZ5gtMn0CQ95anXtzcj3MbHKIfMWeK9mEj3N1_4z2xYJzNfOoqnNxeJ3k4/s400/Screen+Shot+2012-01-06+at+9.33.42+AM.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5694558345635568818" /></a><br />New wall get!Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-8639420493541487072012-01-05T08:34:00.000-08:002012-01-05T08:35:53.632-08:00day 3<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcdrlPCwA1J2XdHjJXq4KLYlghZ02_P3n_u21X-1XdKD4Znuk9SinmTqLywppCoN_vfxeF6kSvFz5qyCJ-ub1_7DDRUYsBuHERS6v2yUEdriqLu1CU8jjhEQb3-vPUoPDfNoyEKsiuxE/s1600/Screen+Shot+2012-01-05+at+9.34.18+AM.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 251px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcdrlPCwA1J2XdHjJXq4KLYlghZ02_P3n_u21X-1XdKD4Znuk9SinmTqLywppCoN_vfxeF6kSvFz5qyCJ-ub1_7DDRUYsBuHERS6v2yUEdriqLu1CU8jjhEQb3-vPUoPDfNoyEKsiuxE/s400/Screen+Shot+2012-01-05+at+9.34.18+AM.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5694187529252665138" /></a><br />So I forgot to upload yesterdays but it is included in todays so this is how far it has come alongSandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-39093233515859635192012-01-03T09:50:00.000-08:002012-01-03T09:57:00.079-08:002012 year long project<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NymQotzXS3D39C7PXl4CGGr93mawO7EZCjnZqR_5Kx41qJAqH2eLd6kuS5r9-kGKUMA9qW4B0qoFs_WqxEJquJc74om_69HeQn6E7fJopnf04h9jNveuUUfS41T_bNUPMqBIQZ8q4Fo/s1600/Screen+Shot+2012-01-03+at+10.50.16+AM.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 283px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NymQotzXS3D39C7PXl4CGGr93mawO7EZCjnZqR_5Kx41qJAqH2eLd6kuS5r9-kGKUMA9qW4B0qoFs_WqxEJquJc74om_69HeQn6E7fJopnf04h9jNveuUUfS41T_bNUPMqBIQZ8q4Fo/s400/Screen+Shot+2012-01-03+at+10.50.16+AM.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5693466243772496994" /></a><br />so as the new year comes I have decided to make a piece that i work on a little bit(about 30 min) each day of the year. I figure it has been a while since I have made an art project on my own out side of school and work so I start this in the name of keeping art a part of me not just my profession. we'll see how it goes this is the tid bit I add in for today. this little piece is a 2/3in by 2/3 in part of the 48in by 20in final piece i hope to fill this year. Im gonna do the whole thing in photoshop mainly using the paintbrush tool we'll see if i get into using anything else when i start applying color.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-69012862614170885392011-10-18T14:16:00.000-07:002011-10-18T14:31:45.260-07:00Lettermark<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZ5MX4leBjeURmZzycmCnIPguRxmqRGeYJJv20P4zaSwy9iYyaRrCFPp6G46e1MyZrOzbcsZH5vaO4UYY9Vgf3zfmViKQNGA89Zgies6VrW3H7R0rJq0M8ilncBVfs0r9Un27jTLg6R0/s1600/hedgehogHcs3.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 383px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZ5MX4leBjeURmZzycmCnIPguRxmqRGeYJJv20P4zaSwy9iYyaRrCFPp6G46e1MyZrOzbcsZH5vaO4UYY9Vgf3zfmViKQNGA89Zgies6VrW3H7R0rJq0M8ilncBVfs0r9Un27jTLg6R0/s400/hedgehogHcs3.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5664945401268742050" /></a>Our second assignment was a letter mark. We had to do a mark using the first letter of our last name and represent our last name some how. Searching back in the history of the harris last name i found some affiliation to hedgehogs, and due to my love of Sonic the hedge hog i felt it only natural to incorporate it into my designSandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-60690280458184850132011-10-18T14:13:00.001-07:002011-10-18T14:16:09.272-07:00Branding class start<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7rWzpYEEyJkHlriYEaZSxA6pG2KdKtOXUDMzDCRMHmzUoLdkGEW4ocqDaxYxXJPVkKOX3oNya9MGcudW988goO7E4nmYyLjsDlRjOoTmse9pQLRFpDMv1oIMpKPsubNMIGYVQAyo31U/s1600/ninjuiceredJ.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 309px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7rWzpYEEyJkHlriYEaZSxA6pG2KdKtOXUDMzDCRMHmzUoLdkGEW4ocqDaxYxXJPVkKOX3oNya9MGcudW988goO7E4nmYyLjsDlRjOoTmse9pQLRFpDMv1oIMpKPsubNMIGYVQAyo31U/s400/ninjuiceredJ.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5664943486412545746" /></a>Started a branding class this semester And ou first project was to make a word mark for a fake drink so I of course went to making ninja juice aka "ninjuice". I ended up having to drop the uice part of the mark lower to gain a beter balance of the word, seeing as the altered J gave so much weight to the Nin portionSandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-50710954861679652802011-08-07T23:16:00.000-07:002011-08-07T23:25:35.804-07:00Wedding invite<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpPypY0Rqawo9FyUTdecekql9sZ712jhTc0-qEZglzynTXujgvSVOPFyhJTMBFQGHza7nOuTwjvc_pt8VVtkzeeGRU12i8h3z0wuJyiUOEgBRIzk2cuy0Cj0qTa3jCqHaXP4ofLeW3hY/s1600/stantons-invite-page.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 309px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpPypY0Rqawo9FyUTdecekql9sZ712jhTc0-qEZglzynTXujgvSVOPFyhJTMBFQGHza7nOuTwjvc_pt8VVtkzeeGRU12i8h3z0wuJyiUOEgBRIzk2cuy0Cj0qTa3jCqHaXP4ofLeW3hY/s400/stantons-invite-page.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638366272603783666" /></a>
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLkP3A8bMUA5ZqhWQbfsgY0G9vdQOnweOvcA1YQwgAHY32qFEgK8aHYM2NseCiFagUWTI8fkfOZRI0bzAqfsprGKOYlqnIZkRMDQ3Ggu1ijXa3Le3sTlOHdCcN5htUOuBlwzaqzqk8hDo/s1600/monogram.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLkP3A8bMUA5ZqhWQbfsgY0G9vdQOnweOvcA1YQwgAHY32qFEgK8aHYM2NseCiFagUWTI8fkfOZRI0bzAqfsprGKOYlqnIZkRMDQ3Ggu1ijXa3Le3sTlOHdCcN5htUOuBlwzaqzqk8hDo/s400/monogram.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5638366269762236962" /></a>
<br />Wahoo my friend got married. Nice job dude. he also needed wedding invites. And I felt inclined to help. I was nervous at first because most of my art as you can see lacks the elegant qualities that many would want for a wedding invite. So I strained my brain tried to draw like roses and things but It ended up that I had no choice but to rely on my new found love of type to accomplish the task. I figured if my drawing skills lacked elegance then I'd have to try a medium that embodied elegance within it before I got to it. So I searched the web and found an elegant font and set to work. It was pretty rough working through my ideas being as i hadn't thought in this realm of design ever. But once i made the monogram this started to fall into place. I used it as a the background pattern and then it was just a matter of organizing the technical info to fit the elegant pattern. Thus the wedding invite was born. Yeah it may seem pretty average to most graphic designers but comparing it to the rest of my work I feel I grew a lot on this project because it was so far out of my comfort zone.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-54760641775815782662011-08-07T22:58:00.000-07:002011-08-07T23:15:50.853-07:00Thai Food<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghl7mbOA_h4RsmnZPuSCNF_2hSNf91QVqIZk2ev1aJObn3wnlZoEXF2uBJKGfcZch_du8MGC0vxqz1NtnI4HI7UbSZjCG56Pkf5OYSukOUxv0K0lEOvFKqJfeNK3LSwk-DtkUkfqV3Rk8/s1600/thai-menu-pg2.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghl7mbOA_h4RsmnZPuSCNF_2hSNf91QVqIZk2ev1aJObn3wnlZoEXF2uBJKGfcZch_du8MGC0vxqz1NtnI4HI7UbSZjCG56Pkf5OYSukOUxv0K0lEOvFKqJfeNK3LSwk-DtkUkfqV3Rk8/s400/thai-menu-pg2.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638361080498338834" /></a>
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWMaPfCgWd6Xfq6nifrShpguepQa-SkW3-aHGNp8e4S5ik5BD_K0q5Ni7vUTmsawcc814urKFcuBE5bo6Iz8TZBCwESHH3DyO4_MuTemGuZARQYwkDbrHW1VQiVltq4_X7cmShZ6UYwg/s1600/thai-menu-pg1.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWMaPfCgWd6Xfq6nifrShpguepQa-SkW3-aHGNp8e4S5ik5BD_K0q5Ni7vUTmsawcc814urKFcuBE5bo6Iz8TZBCwESHH3DyO4_MuTemGuZARQYwkDbrHW1VQiVltq4_X7cmShZ6UYwg/s400/thai-menu-pg1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638361075309677074" /></a>
<br />Our last assignment in typography was to make a menu for a restaurant. it took no time for me to know I wanted to do a thai restaurant. Not only because their food is one of the greatest things I know of, but also because I had been watching a lot of thai movies and I was interested to look study their art style. So I started by doing just that. I looked at a lot of thai traditional art and realized they had very elaborate line work and it included a lot of elephants. Elephants holding a good deal of significants in thai culture. I also looked a lot at the thai alphabet. I liked it a lot! I think it has tons of amazing shapes. So I went and found a downloadable font that made the english alphabet take on a thai alphabet look. After I decided to make the menu look like an elephant standing on your table it was only a matter of seconds before i decided to use that same thai font replicate in a small way the fancy line work and pattern that ethnic thai art had in it. <div><span class="Apple-tab-span" style="white-space:pre"> </span>Like I said earlier I meant for this to be a standing menu so these images are actaully from the side. when it was printed out I cut it so it was only the orange elephant shapes and removed the white. Then I folded the menu into a triangle shape that stood very firmly on the table. I'll see if i can dig it up and get a photo of the physical piece for the blog.</div>Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-13803667221346206312011-08-07T19:25:00.000-07:002011-08-07T19:37:23.016-07:00SoniKicks Final<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMsrraxQf3k2A4pR2wMrZZ59E-sz7D_Iy-2Jj0xDaXLvRpJ-u0MMauyIT_qHLYy_ZgM4jBSYcX1H88tSogT8frE3h9Sz8EJZPlYLagx4XNa1n3l_H6_rXe6Y4JxcrS2em1CGtzC5xVjAE/s1600/sonikicks-band.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 309px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMsrraxQf3k2A4pR2wMrZZ59E-sz7D_Iy-2Jj0xDaXLvRpJ-u0MMauyIT_qHLYy_ZgM4jBSYcX1H88tSogT8frE3h9Sz8EJZPlYLagx4XNa1n3l_H6_rXe6Y4JxcrS2em1CGtzC5xVjAE/s400/sonikicks-band.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638306679637533202" /></a><br />I finally ended up trying to incorporate sonic the game into the ad. I made this by taking a screen shot of sonic 2 and then copying the track itself I then tried to imitate that 16bit style brick pattern with type. I found a font on Dafont.com called "BM tube A10" And used it to Type sonic the hedgehog over and over then varied the position and it ended up looking like the bricks. I then used a 8bit arcade styled font for the words you need to read.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-74612060904003319532011-08-07T19:10:00.000-07:002011-08-07T19:23:46.603-07:00Sonikicks<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSlFhyphenhyphengIWLG_0HZdqD0iX0GgzVqL064Xfa_0Gb9ZsFjn7JW8Tr86B3qnRFLKq-JsAPLqEsyQdGHmwCUd3TWbYzCnUzrOJ5jf-LzdabPaP5IZcYIremfsYc1Qof112PtnEwHFEMLD-BEY/s1600/sonic-stand-fast.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 247px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSlFhyphenhyphengIWLG_0HZdqD0iX0GgzVqL064Xfa_0Gb9ZsFjn7JW8Tr86B3qnRFLKq-JsAPLqEsyQdGHmwCUd3TWbYzCnUzrOJ5jf-LzdabPaP5IZcYIremfsYc1Qof112PtnEwHFEMLD-BEY/s320/sonic-stand-fast.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638302830616357298" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jSv-gRMSUOHCR1OIHgs-AcnXtpu2PXo8W-JD0g9aRxBurxS3zuy6mLbrvmMMOhWWn-T-3OVNS16TVZ2Ps7vCb3LrWENRqGVgNv5Viea9wggS6eF5ElU471eHlVObnXRlYUw6A7_5In4/s1600/hero-shoes.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 247px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jSv-gRMSUOHCR1OIHgs-AcnXtpu2PXo8W-JD0g9aRxBurxS3zuy6mLbrvmMMOhWWn-T-3OVNS16TVZ2Ps7vCb3LrWENRqGVgNv5Viea9wggS6eF5ElU471eHlVObnXRlYUw6A7_5In4/s320/hero-shoes.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638302830816076738" /></a>Later on in my type Class we got the challenge to make a shoe ad using 1 picture and just type for the rest. I of course turned to the man who relies on his shoes for his very life, Sonic. I named his shoes Sonikicks and figured it would be cool for like a free running or a soap shoe type of thing. these were 2 i deas i had to get out of my head when we first got the assignment. But I felt neither of them portrayed Sonic's stylish attitude. Also I think that the Speedy letters in Fast are too gimmicky but I couldn't find a solution that didn't seem gimmicky, other wise concept wise I liked it the most.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-47245471932235151702011-08-07T19:07:00.000-07:002011-08-07T19:10:41.047-07:00Bird in a tree<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hWiKRXI3aIToVnk-H8x6xIsbirSvXNKjWBeWUqveGmay62OVwT8paXbmPlyISnnP5jkzb1VX5blxvyU2Ur5WdA5WVylVhvxlLpzjg8UdYhYHkSR58xBluptuLL0zRez1DTRAdJZzFXo/s1600/charming-font-tree.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hWiKRXI3aIToVnk-H8x6xIsbirSvXNKjWBeWUqveGmay62OVwT8paXbmPlyISnnP5jkzb1VX5blxvyU2Ur5WdA5WVylVhvxlLpzjg8UdYhYHkSR58xBluptuLL0zRez1DTRAdJZzFXo/s400/charming-font-tree.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5638301023700196914" /></a>In this project I used a Font from DaFont.com called a charming font. It had really exaggerated serifs which makes good for making things other than letters. In this project I challenged myself by trying to make Each thing out of it's own name.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-47747807602537076882011-08-07T18:58:00.000-07:002011-08-07T19:07:11.319-07:00Black Letter City<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSABX1-MRZEeGpLEVVe8Ypg0YMGiCC3LZiN3hMtZ8gT_cfSuIlLUp2VFXpDX4HAAUq8o1qIptC9z7e6no6bOAdhCaTfPZ3lwpeVVvjXXmb2T2EBialstkQ0LOq2cm0UVfgjEqsRno98Bk/s1600/lucidia-blackletter-city.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 259px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSABX1-MRZEeGpLEVVe8Ypg0YMGiCC3LZiN3hMtZ8gT_cfSuIlLUp2VFXpDX4HAAUq8o1qIptC9z7e6no6bOAdhCaTfPZ3lwpeVVvjXXmb2T2EBialstkQ0LOq2cm0UVfgjEqsRno98Bk/s400/lucidia-blackletter-city.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638298910001376850" /></a> So after the cellist I went with making this here city using the same alphabet. The city itself is made out of the letters from the name "Lucida Black Letter" then the characters are made out of the names of one of the other characters. Don't know if that makes sense but that is how I did it.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-36826658707984590982011-08-07T15:58:00.000-07:002011-08-07T16:11:07.323-07:00Typography<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IH7SQTbaGSefYgInCjMWz0cPwoZAJjvCpJD1Tsje3Wkr6kNnTO7dbR9oIkhBzo3ziUnqha70DpgX7e_o-5g9e7-X_2eHTVyKWuq5sP-YINQ8lC00DIkMhLDqQKLP_N_PCc3PBqvBDYY/s1600/typographyblackletter-porject.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 259px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IH7SQTbaGSefYgInCjMWz0cPwoZAJjvCpJD1Tsje3Wkr6kNnTO7dbR9oIkhBzo3ziUnqha70DpgX7e_o-5g9e7-X_2eHTVyKWuq5sP-YINQ8lC00DIkMhLDqQKLP_N_PCc3PBqvBDYY/s400/typographyblackletter-porject.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638254163482414178" /></a>So after trying a few design classes I found I had a huge need to learn about Type because I was terrible at it. Which is kind of a sd considering my mom also being a graphic designer and being a type nut it was amazing i lacked so much of an eye for it. At the beginning of the class we were encouraged to look at Letters as shapes instead of letters and so I did a few projects trying to use The letters of font to make different things. This cello player and friends was made in Lucidia Blackletter I liked the font because the letters all had very unique and exaggerated shapes.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-24189274540092349782011-08-07T15:54:00.000-07:002011-08-07T15:58:04.134-07:00Last whats under the bed idea<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Yb3sPY4WWBbwyTb-SidQxNM3ofV2SMO9LVuBfaAl5qzjkvLB3r0d6BI2oqB3lABtlI7TTpLmUrBc2PrGU8_uy6sgXP0Gnjtf_HsV13QZAIrLMgsWdjaXfvUeGsn2VjlDsxKgCVjOm_0/s1600/book-cover-Idea-1.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 309px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Yb3sPY4WWBbwyTb-SidQxNM3ofV2SMO9LVuBfaAl5qzjkvLB3r0d6BI2oqB3lABtlI7TTpLmUrBc2PrGU8_uy6sgXP0Gnjtf_HsV13QZAIrLMgsWdjaXfvUeGsn2VjlDsxKgCVjOm_0/s400/book-cover-Idea-1.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5638251550361340642" /></a><br />So After i finished the cover i decided to see what effects color had on it. So I took it out and tada The pattern really shows it's power here. At least that is what i learned from it. the pattern makes shapes that aren't even there. Like imaginary lines but instead imaginary shapes.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-63328636862322548582011-08-07T15:47:00.000-07:002011-08-07T15:54:50.096-07:00Whats under the bed cover<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ9EWuqy9518bmosJJTpfpvdbLSwVY8zVUOplvMjPFgVyNnMVwMnUiZqZP_qsLsX1M_b7svElQMQXVb0CbReZAkYAEiUwGS71I34s3AF0Zwa75xFEQ2Wi4PUOoIpjcRNTRRQvOaRfQR3c/s1600/wutb-cover.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ9EWuqy9518bmosJJTpfpvdbLSwVY8zVUOplvMjPFgVyNnMVwMnUiZqZP_qsLsX1M_b7svElQMQXVb0CbReZAkYAEiUwGS71I34s3AF0Zwa75xFEQ2Wi4PUOoIpjcRNTRRQvOaRfQR3c/s400/wutb-cover.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638249871917729938" /></a>So this is what I ended up doing for the project. I kept the idea of pattern in the color which was pretty cool to work with. It took a while to draw the pattern but in the end it turned out cool enough that I was ok with the work load. The book Itself is a story about how the sandman help a girl escape an Imaginary realm taken over by little gnomes that like to hide under kids beds. kinda one of those creepy kid's stories.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-51942537533132373772011-08-07T15:43:00.000-07:002011-08-07T15:47:54.515-07:00Whats under the bed<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhv1aKQH6uP9ZY5qydSxoFbUd6sXljcDF6qlkifJT-dQrxnORuFuCsk9DwZ0mg6z7aiCrThSSw94vP3DGdM9LyDYlGrl0EdTE4FF9HPObdEYYPYQSsI4QneyyrcKxiLK-VMaTAGcKfoiw/s1600/wutbidea2.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 309px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhv1aKQH6uP9ZY5qydSxoFbUd6sXljcDF6qlkifJT-dQrxnORuFuCsk9DwZ0mg6z7aiCrThSSw94vP3DGdM9LyDYlGrl0EdTE4FF9HPObdEYYPYQSsI4QneyyrcKxiLK-VMaTAGcKfoiw/s400/wutbidea2.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5638248944316026098" /></a><br />This is an idea for a book cover project we did for my class. I had just watched "secret of Kells" Which is such an awesome show. I liked how they used pattern in that cartoon and wanted to try some of my own. The book Whats Under the Bed is one I wrote a long time ago but never fixed up enough to do anything with. But it had enough content to make a cover out of.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-39135510206171784602011-08-07T15:38:00.000-07:002011-08-07T15:43:15.380-07:00Illustrator<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV31SU2mgLZz5eS8_5zTHAQoWtKwo6EdXtlRORI-Mc3ScBESLA13osT3yvBFGpzJqzk9RNTicmY7YbfA_YfEWLGU_1lC8egqzwlm9Qr8l741YCMGYr5EOyYw45FXibIV0xXRE1zWfuGHY/s1600/Untitled-1.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 307px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV31SU2mgLZz5eS8_5zTHAQoWtKwo6EdXtlRORI-Mc3ScBESLA13osT3yvBFGpzJqzk9RNTicmY7YbfA_YfEWLGU_1lC8egqzwlm9Qr8l741YCMGYr5EOyYw45FXibIV0xXRE1zWfuGHY/s400/Untitled-1.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5638247388703510930" /></a><br />In our class we learned how to use Illustrator. My teacher told us that if we could master the pen tool we would master the program. So this was some practice with the pen tool. It was really weird to use something so crisp and clean but in the end I like the effect drawing with shapes has on the over all pic. This is a pic of Optimus Prime and I Fighting a Dragon. Pretty much an average day occurrence. I used photos and then with the pen tool drew shapes to make this peice.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-58172140731015937972011-08-07T02:10:00.001-07:002011-08-07T02:14:18.397-07:00Squid armor<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4D4jEb0B4AAxhH9K1_XAupBuPb3vwK3PrMOlrFfv1HfrtyHpPNu45Ga-oUTKvypICX2nxzgA9ft5mfLcC8rhE2EBET6A81ZoJS9r0skJOkP7zixnI4yZAv7kHlx5fAUzhWkiff_ifzU/s1600/squid-gas.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 231px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4D4jEb0B4AAxhH9K1_XAupBuPb3vwK3PrMOlrFfv1HfrtyHpPNu45Ga-oUTKvypICX2nxzgA9ft5mfLcC8rhE2EBET6A81ZoJS9r0skJOkP7zixnI4yZAv7kHlx5fAUzhWkiff_ifzU/s400/squid-gas.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638039060103994578" /></a><br />This was my favorite out of the three. It also took me the longest to think of. i had elephants being a land animal, birds being a sky animal, and so I figured to make the set complete I would need aquatic sea life. But I couldn't decide what to do. At first i tried what seemed like 1000 different lobsters and whales. but neither of them could I think of a good face on veiw. Final when a squid came into mind I found relief. It didn't take long for the design or color to come after i had decided on which animal I was going to use for it.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-44714551883328043382011-08-07T02:06:00.000-07:002011-08-07T02:10:10.342-07:00Bird Oxygen<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvR9f3Nr2tICuQgAp5UTFCRxtMPm6pl6I-3t8FlIXrwnv27PlDPe97JJYcjwntiVJ9mqtwprRAyTz6njjXQ6O1R_HtUCDXY9yHqvad-QyY-XqtndiYo36E6pxx08WksJ4wGpQHr4Y9kZ4/s1600/bird-gas.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 385px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvR9f3Nr2tICuQgAp5UTFCRxtMPm6pl6I-3t8FlIXrwnv27PlDPe97JJYcjwntiVJ9mqtwprRAyTz6njjXQ6O1R_HtUCDXY9yHqvad-QyY-XqtndiYo36E6pxx08WksJ4wGpQHr4Y9kZ4/s400/bird-gas.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638037912531906898" /></a>This was an immediate idea that came once I started thinking of options with the elephant gas mask pictogram. I always thought that the oxygen masks that pilots wore while flying jets looked kind of beakish. So this evolved quickly in ways of the design. What colors to use though were hard for me. I tried tons but could never settle. Once the green seemed to come in it stuck and i started designing around it.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0tag:blogger.com,1999:blog-8648622933159401298.post-16973624705794296072011-08-07T02:02:00.000-07:002011-08-07T02:06:06.245-07:00Elephant Gas mask<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPI7iCGyQTgUYU4aRRTfiH1yc8BIJNLNnnkSt-5cp79uUXLiuODIeQHt9arW1-zBaCKU_NAxmoFlunj2M4YE9tRWxY4SjxDSsWUQu0m03iWpdh4YCgRy-euAo-isz4fmCbOt4jUdzbrk/s1600/elephant-gas.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 240px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPI7iCGyQTgUYU4aRRTfiH1yc8BIJNLNnnkSt-5cp79uUXLiuODIeQHt9arW1-zBaCKU_NAxmoFlunj2M4YE9tRWxY4SjxDSsWUQu0m03iWpdh4YCgRy-euAo-isz4fmCbOt4jUdzbrk/s400/elephant-gas.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5638036906836849106" /></a>So this doodle came out during some lecture on physics and i didn't think much more of it till I saw it while making the note men. i remembered someone had mentioned how they liked it. So I turned it into a pictogram. I chose this Idea over the note men because it had a better potential to be colored and i wanted to work with color for this project to see if i could make something success full both in color and not in color. Of course this change of plans gave me the challenge to think up 2 more pictograms that went along with this pictogram. Which was way fun to try to figure out.Sandmanhttp://www.blogger.com/profile/04919916092042409828noreply@blogger.com0