Maybe it's just me... Outside Work 10B

So.... All's well with learning CSS and HTML... however, the CSS 101 seems to be missing the component of the HTML tutorial in order to connect both together... so essentially I am following along the instructions but I have no clue what exactly is being applied. Send help please.

FALSE ALARM. IGNORE THIS. I found it. For some weird reason earlier I came to believe that I had forgotten to drag the HTML 101 pdf... thank goodness I didn't! 

Week 10B Cont.

In other news, our next assignment that will lead into our final project was to choose from a list of designers a particular designer. There are some questionings I have to myself as to why I didn't choose John Lasseter when I had the perfect opportunity being the first one to go... but at the same time I'm glad I didn't choose a person that pretty much everyone would be fighting tooth and nail over (or at least a majority of people). It's cool that he was a choice, you know, what with working with Pixar and Disney and all. But I could do research about him any day. Heck, pretty much anybody can if they set their mind to it.

The person that won me over is Kyle Cooper. I didn't really know what he was involved with until looking more into his works, but when I originally saw on Wikipedia what he had been involved in both movie and gaming wise, I knew this guy needed to be looked into. Kyle Cooper basically has created several movie titles for various famous movies. This is just the short end of the stick at the moment, the real deal of 500 words about this guy will be coming up sometime this weekend! I just kind of wanted to randomly put my thoughts about today down is all.

Week 10B

Today we learned a lot more about Code and were introduced to CSS. What I learned this class is a lot more stuff than I would have thought. Here's the hopefully not too long run down.

CSS stands for Cascading Style Sheets. CSS is a way of using 1 set of formatting for a webpage across a whole website. Normally when using CSS, you want to have 1 folder with the CSS file as well as the HTML file and also whatever images you need inside of it. 

There are 3 types of CSS. 

• Inline
• Embedded 
• External

Inline is directly into the coding of HTML page.

Embedded is written in the head of a document of the HTML page.

External is when the CSS file and the HTML file are separate in the folder.

CSS Syntax is basically written out like this:

Sector \ Declaration

h1 \ { color:blue; font-size:12px;}

h1 and whatever is within { } is the Sector and the Declaration.

color and font-size = property

blue and 12px  = values

The way I see it it's basically like a little blurb. the h1 is your person. the { } is the blurb, and all the stuff inbetween is basically the guacamole. I don't know, just a jumbled mesh of whatever you want basically. I think guac.

CSS has a box model. You have the content, padding, border, and margins. The Padding and margins are invisible while everything else is visible. 

You also have selectors. A selector has: a base, --> a class --> and an ID. an ID is for the most part a 1 time use kind of thing. A class however can be used multiple times. 

The base for a selector is, for example: h1, body, <p>

Random note, "#" is an ID. 

"." stands for a class

<div> stands for "division" or "area". 

Resume HTML Final Results!

For the homework I made my resume and I think it turned out pretty okay! 

I'm really enjoying code a lot, even if this is just the basics.

Week 10A

Back on track, we've been introduced into HTML and I couldn't be more happier! I didn't think it would be so much fun, but I really would love to tinker with learning HTML and CSS a lot more. I think as I continue my late journey in being a Graphic Design Major, I think I may be more drawn towards HTML and Illustration design in general. I don't exactly know still what I'd like to do job wise specifically, but I feel like the more I learn about HTML and continue digitally drawing and design, I'll figure something out eventually.

Here's a screen shot of the test progress that we did in class of my test HTML.

It's funny how a lot of people are always afraid first chance they see code. For me, when I first saw it I was more so intrigued than anything. Which may or may not be a good sign for myself... I was also aware of some of the code that we use daily without even realizing it, like how to bold things and italicize, how to change sizes of fonts via sub or super script, and so on. Learning the basics it seems pretty much makes you set for life on the harder stuff, so I've been told anyways. 

The things however that I did learn in class is a lot of things I didn't realize, and probably that most people don't even think about. 

For one, the internet is a world wide, publicly accessed network of interconnected computers through an IP address. You have a browser request, the server responds, and then the browser finds it through that universal server. There is HTML and FTP. 

• HTML is a hyper text markup language designed for creation of web pages with hyper text and other information to be displayed in web browsers. 
• FTP is file transfer protocol. This is the most secure way to exchange files over the network because of it having a password attachment. 

WYSIWYG = "What you see is what you get" Really long. But it enables to see on display exactly WHAT will appear when a document is printed. Pretty handy I'd say! 

When it comes to coding, HTML is literally the starting and end. It's the structure.

CSS is the style based portion of coding. When it comes to coding, spaces do not matter. You need to have line breaks <br></br>

Some fonts that everyone has that you need to keep in mind when in terms of HTML are:

Times New Roman

Georgia

Arial

Verdana

Courier New

Lucida Console 

Vacation! Week 9B into 10A

Had a small break from homework in this class! Got done with the 404 and it was a pretty chill weekend, thank you Pannafino! 

Outside Work Week 9A

After the class critique we did I took into consideration what my fellow classmates have said. Originally, I was going to go for making some of my things transparent so that way I wouldn't have to worry about colors. This however did not go over well when I applied it as a test. The transparency becomes red, so naturally I was a tad bit upset. Thus, time for another thought. My classmates mentioned, that from what they saw on the website, that probably adding some of its colors would be a good idea. I also went back and remembered that Armored Games has a logo for themselves, a shield. They also have a shield and two swords (I used to play their games all the time... oh the nostalgia)

I traced around the shield to make it be a kind of white background, while keeping the remainder of the layered image a light blue. I made the two swords and I think they came out pretty well. Next I decided to add two shields at the bottom, to represent the "home" button as well as the "contact" button, all in caps lock bold because the website uses pretty simple type, and also caps.

I haven't been able to check yet, but I will be investigating tomorrow on how the background will look with my design. It's either going to be shields that have an "!" on them with the words "Warning" on the top and bottom continuously, or just the color itself. Here's to hoping it all works out! 

Oh and also on the knight... it was suggested that my original idea with the type could actually be used for more of my own writing in the form of a scroll. I quickly took into that consideration and it worked out splendidly! I also had to change around my original 'script' persay so that all of what I wanted to write would fit, and that actually worked out for the better too in terms of incorporating 404 not found error hahaha! 

I also realized that a lot of people are uncertain what my box is about. While my original idea was that it is the "realm" or "portal" to the gaming world, it can really become dissociated with the website in terms of gaming. That's when it hit me! The Laptop! So simple and yet I didn't even take it into consideration. I think this will work, but just in case I am going to upload both versions of my final outcome with the box and with my laptop.

Outside Work Week 8B

After the suggestions from my classmates during 8B, I started to work immediately on changing my knight's stance and added a key for him. The changes were very dynamic. 

I worked on him for a bit in terms of lighting and also shadows, trying to keep to the style of the game he is based off of; Shovel Knight.

Not too bad am I right? (noticing now I may add some more lineart / dark shadows to give some more emphasis)

Then I messed around with the "portal" box and the image. I was told earlier that I could mess around with filters to create more of a distorted world, that at least the realistic image of a castle in the back could still have a gaming vibe to it. So far I have this.

I don't have any trouble with the background being white, as my actual bottom layer will just be a blank, white color. I am noticing already that the shadows probably have to go the opposite direction, as I wasn't thinking. The box is going to have hand written: "Halt! Ye shalt not pass!" and then I am going to type up the rest of the blurb below the knight so as it looks more official for redirecting and stuff. 

I've been kind of bad with updating this blog in terms of my progress to the final result I have for 50% so far, (and at this point it is 50% since I don't have the dialogue or the type.....yet)

Fall Break / Week 8A

I admittedly have been away for all of fall break- but I'm making a comeback! I have  been able to get parts all worked out together, and I have my flat colored image currently (which I will shine up considering it /is/ armor) and I am also piecing together my background image along with the mirrored piece. I have also decided to incorporate very bad and simple text that I think would work well with the whole "medieval" feel of what I am going for with this 404. 

I'm still a little hazy if I am going to have my knight either inside the mirror or outside... but I'm sure it will be worked out well. I'll have more updating pictures shortly.

I am planning on making the knight more detailed with shadows and lights, in the style that my original magazine pictures were of the concept Shovel Knight. 

As for the box up top, it's white now but if you hold down on the image and move it around the inside and the outside are both transparent. I know I need to spiffy up the middle section. I think I'm still a little unsure what to apply that is photoshop based- maybe a light or a ball that represents the sun in the mirror? 

Also this is what I'm aiming for text wise! 

That's all I have so far as I kind of forgot what the other redirect stuff we were supposed to include....

Week 7B inside class work

I've started to draw out what my graphic will be. I've gone through and done some imagery research when it comes to armor. I am basing my concept on a game called Shovel Knight, that I thought would fit perfectly with the 404 I am going for. I am thinking about changing the perspective of the mirror box I have, but overall I am confident that I am on the right track! 

This is my current design 

I am using this rough sketch base and then applying one of two knight concepts. The first will be the usual medieval look (like the pictures above) while the second one if I am going with my alternative design will be based upon medieval asian armor. 

Week 7B

Today we went over more about our project and what essentially is going on. Few things I learned from this discussion and lesson is that:

background.png always for the html. You should be fine for a web html 404.
You never want to have a vertical bar on the bottom
A layer on top of a layer is essentially what you are creating. 

With a bg layer that looks like crap you can find the borders of the image above.

You always want to save everything you need in the images folder. After doing so everything should be there.

you want image.png
you want background.png

there is also index.html and style.css

a simple bg color normally works best.

Outside Work Week 7A

Finding magazine clip arts is kind of difficult, especially when you have a set theme in mind.... surprisingly though it's quite helpful in developing more ideas however. I am currently switching up my design of what I want to do, while being able to know what I can manipulate and use for my graphic, magazine, and photo item. I went to Barnes and Nobles to look through some magazines and all I could find was one page- so I took a picture of what I felt could be used or incorporated... hopefully that is okay since my camera on my phone is high quality. (I honestly did not feel like spending 5 dollars for a page that I just need to scan at school for, sorry!)

Below are images of what I have accumulated, along with my original and current design ideas.

previous designs what I originally thought of when dealing with Armor Games. Then I stumbled upon this.

I think I Could use either the box cover, or better yet, the text inside. 

I could possibly use photoshop to put the text inside the mirror portion of this box.

Alternatively, my other idea is to incorporate a knight figure with a scene of a castle and a lush scenery behind him. It kind of resembles and symbolizes that of a game, or entering another realm which for a gamer is pretty cool. That's some pretty intense mini Narnia stuff going down.

these two are of what I took a photo of from the magazine I was talking about. They perfectly fit and are from the game "shovel knight", so what I could do is for my graphic portion I can use these two as a design references and create a knight in a similar pose (possibly as the first one) and also have the witty phrase, "you shall not pass!" or "halt!"

These final images are from the magazine clip arts that I figure I can incorporate into the mirror. The bottom one is mostly of the shield / medallion symbol, and is for another idea that is like the mirrored one.

Below are my final concepts of possibilities based on the photos I was able to take and images and items I was able to find. There are a few more pictures and also images from magazines / travel books that I think could work very well with incorporating into the mirror.

Week 7A

We have been introduced to the next project assignment- the 404 not found. I find it may be a little bit difficult to incorporate a magazine portion, but if it's art and games related I think I'll be okay. The website I want to go for is from an old site I used to play on a lot of times in high school called Armor Games . com. I can incorporate games, any style, and also knightlyhood and castles. I think I'll be able to find a magazine picture and incorporate it in terms of games and such, and the graphics I can easily work with. As for the picture, that may take a bit of time to find a photo that can be incorporated well. There are multiple action figures and things I have around the house- so maybe I could utilize that to my advantage. 

For right now, it's time to start thinking of what exactly to do. Also I finally have a better understanding of how the journals should be... I realize it should be three separate. I'm however very bad at taking notes and in general remembering things so what I've been doing is condensing so that I include everything in the journal from the title. 

I may have to edit some things later on....

But I think now I finally have the right concept. 

Week 6B l l Outside Work 6B

Making the new advertisement, I'm hoping I did mine okay and also it was done correctly. It's pretty simple... I wanted to do more but I ran out of time sadly. The original advertisement I chose was supposed to be for an art ad I believe, and I turned it into an advertisement for a "review" of a new hit series on television. I'm a little too orange in the printed version, but the regular version I seem to be okay. I'm pleased and also a little eh with what I've done, but for the most part I'm happy with it.

I'm excited to see what more we can do in Photoshop and what other assignments are going to be.

With the Lynda videos, I'm finding a lot of nifty things I could never do in my art program that I use, Paint Tool Sai. While Sai is a very good art program and I've used it for years, the things I can do combined in Gimp, Illustrator, and Photoshop can really help strengthen my knowledge on digital art in general which I am very happy about.