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.
Wednesday, September 19, 2012
Hey guys so after seeing all those parallax type sites I wanted to learn how to do it. I found one tutorial that really helped here. 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.
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 here. 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.
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 my html and CSS 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".
Lets move onto the body of our page.
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.
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.
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.
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
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.
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.
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.
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?
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.
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.
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.
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 here. 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.
View My CSS here
View My Html here
Friday, August 31, 2012
Tuesday, August 28, 2012
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.
Sweet candy corn this site does it too! here is the url if you want to check it out yourself:
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.
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:
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.