Final Week Outside Work

Well, it's been a journey. I wasn't able to really utilize talking with Pannafino (though I did experiment and figure more things out thankfully) but that's okay! I gave up on the video hahaha. But I included gifs, I included links, and I was able to create my own Banner gif which I am very proud of. I was able to include a decent (though not as perfect as I would have liked to achieve) horizontal bar with links provided as well as a pretend footer- which has the most contrast in terms of color because I thought that made sense... Overall I changed up my background to make it darker, and I matched my wrapper so that it holds a bit of opacity (but you can still see the content quite well.) Seeing that my composition was based around a lot of greyscale, I wanted to spice it up just a little bit by including the colors orange and blue. I chose to do this because of the Tron gif I provided, as well as I wanted it to connect to what Kyle Cooper has done in terms of what he has created and also what he has founded (ie. Prologue and Imaginary Forces.) It has flaws but for the most part I really do feel very accomplished.

Week 15A - 15B

It's hard to believe that the fall semester is coming to a close! We only have today really to finish whatever work with aid if we need it before our final is here. It's been one heck of a journey. Honestly in terms of my webpage, I haven't been able to think too much outside the box- so if anything I've just been pushing forward so that way I don't get stuck with having to wrack my brains. I had an original plan that was a lot more organic, but to be truthful? What I have now I am proud of. Though my progress recorded is small, the subtle changes between each new update really make me happy. 

I plan on finishing up for the most part in terms of content, before seeing what else I can do. I would still like to add a video if I can, maybe replace some of the images with it, see if I can fix the link problem I'm having in terms of aligning them all (mimic and thunder did it but I don't know why Hulk isn't) and adding some more buttons at the bottom. What I'm planning to hopefully do too is create a simple redirect to maybe something like this for work cited purposes.

Week 14A / Outside Work 14B

We had a lot of time during class to work on our projects- or more rather Monday since it was Thanksgiving break! During that time, I was glad to get some great feedback from my Professor (thanks Pannafino!) about how to better my project. It may not look like it's formed, but from my previous work in progress I have definitely evolved and grown with my project!

Honestly it is a pretty blah page... I still don't really grasp the concept of putting codes and divs and such into creating intricate pieces of website pages, but honestly? I am really proud of where I am at so far. I have had a lot of "AHA" moments which I am thankful for! I have had moments of frustration where I do not understand why something is not working, why something is not appearing, why it is not correctly aligning, and moved on. Then, I come back to the same thing and I have managed to figure it out. 

Overall, I think I am progressing at a nice, smooth pace. Hoping that this week I will be able to add in a video, and a few fancy-fied link redirects!

Outside Work Week 13B

Well, to be truthful I hate to say that I've had more difficulty with code than I think I ever had in Photoshop and Illustrator combined haha. But I have learned a lot, a lot of trial and error. I have a lot of questions that I'm hoping can be solved and I can figure them out in class. Here's some work in progress shots so far of the actual html and my coding.

The bottom is actually alligned more centered, I just had to zoom out to get most of my shot in so that's why the hand is off. I figure there should be a way to fix this. I also just recently tried a website my friend mentioned to me and it actually has helped me understand code A LOT more because it's a website that makes you type in the code, and gives you step by step instructions on how to perform HTML and CSS. The website is called, "Codecademy" and it's really awesome.

Week 13A - 13B Inside Class Work

OK SO I ADMIT IT. I GOT SUPER LAZY. Keeping up with the blog anyways, I am super behind. (not really, but to cut things pretty short...) Basically this week was having a small critique on our designs and hoping to solidify a better version in terms of appearance. I think I'm still kind of stuck with my direction, but I have definitely gotten a better feel for what I am doing. My original sketches were very organized in terms of box set up, but I keep forgetting that we want to have shown the actual appearance compared to the skeleton of the code (so to speak). 

For me that's a little hard, because I originally see everything as box placement. I know how I want things to look, and when I outline them with 'boxes' (that could however be because all we've been doing up until now /IS/ boxes) in place of the actual content I want to present. 

From my previous sketches, I made a more fleshed out one with a direction that I wanted to focus on Cooper in terms of one movie he has does a title sequence for. Originally I was going with Spiderman, because I want to incorporate how he created that sequence, which used an abstract comic like style to introduce the main characters (along with their portraits) Here's the "fleshed out" but still needs work, draft.

The way that it looks, I still need a bit more time developing this... I know what I still want to incorporate as well as include at least. It's just getting the structure down pat and the images all lined up with one another correctly.

Week 12B / Outside Work Week12B

This weekend has kind of been crazy, but that's beside the point. Last week we went over how to do more things in coding, which will definitely help in creating the website for our designers. We also got time in class to work on our concepts. 

I'm a little pissed- I kind of wish that the wallpaper for warning us about the wiping out of desktops and such gave me a specific date because I had come to believe that "until Turkey Season" meant they'd do it during our Fall break. Everything in terms of folders and html coding that I have been working on have now all been erased and like hell I'm going to remember everything for them without having a reference to look back on my work. 

I'm a visual learner, if I don't see this stuff in front of me then I'm not going to be able to recess it as well as going off the top of my head and having to find out all over again. Granted I know I'm just whining, but now I'm a little panicked because of this. 

Anyways though, ranting aside. I worked on some sketches to have some concepts. Here are the sketches.

Week 12A

We've been given our final assignment, which, you guessed it, is creating a website dedicated to our chosen designer! I learned a bit more in coding from this class which is good, and was able to play around in CSS and see how you can move different boxes to position them in the way you want it. 

I am a noobie at CSS and HTML still, so I think I'm going to have to try really hard not to go over what I want to do compared to what I am really kind of only capable of at this point since I don't have any real experience with the program. With that in mind, however, I still want to be able to include a photo, a video, and maybe even some icons and links that re direct you to the main websites that my designer has.

Don't Fear the Internet ep. 6

Classes and IDs. For me, this is where things get hazy and I don't really know the differences- or more so I guess I've used them but I just don't understand them.

IDs can only be used once. Classes can be used multiple times.
IDs are used in the HTML file. And within the CSS, the "ID" of whatever you have is how you change pretty much everything that has that selector...or was it element.. I'm trying to go off by memory, don't want to cheat if I'm wrong well I'm wrong! But I get the concept at least, yeah? 

So for example, within the tutorial shown, the selector (or element.eh) h2 was given an ID. 

<h2 id="location-header">

Next, you move into the CSS file.

h2 { 
text-transform: uppercase;
font-size: 16px;

This changes all the H2s and makes them uppercase and small. 

# means the "ID of..."

so

#location-header {
border top : blah
margin top : blah
padding top : blah

This changes the Location- but only that. IDs target specific things that just occur ONCE per page. 

Classes step in for multiple things. 

<span class="price">$$$</span> apply this to everything.
in your CSS, you write .price ( the "." means "class of....")

.price {
color: blah;
}

When you do this the prices stand out! Wowee! You can do that to anything. Pretty simple, right? 

It seems a lot simpler now.

IDs > Classes > Elements

Think of it as a hierarchy. It really /is/ a hierarchy, really. So whatever is higher, takes priority. For example, a title has a class. it also has a class. The class color will be taken over by the ID. 

Now if you include both ID and Class price, it's even more specific. Doing so overrides both JUST the ID and JUST the Class elements. 

Remember this: CSS LOVES SPECIFICS. So being more specific about your coding will make your life a whole lot easier and probably less stressful and overwhelming.

Don't Fear the Internet ep. 5

These guys are adorable- and their music for their videos is equally adorable. Aside from that, their videos are really handy and helpful. 

They went over what we've gone over in class, but went a little deeper with explanations and also provide images and such- which really really help me because I am a visual learner. It's easier to say you understand things compared to saying no you don't get it and you want further direction. Granted, I understood the concepts, but without pictures and without visually seeing things being applied, I get lost very easily.

I know a lot more about Internal and Inline, and I do like External since I've been doing that three times now. I think it's handy, even if it may include two documents in one single folder, along with the images and such. Although, I think Inline is also pretty cool too. It's just combining the two in one file. And it would appear that the <style</style> just goes inside the <head> section of the document.

<head>
    <style>
         h2 { blah } 
         h3 {
         p {
    </style>
</head>

and so on. At least, I think that's how it is applied.

CSS is similar to HTML code. CSS has a fixed set of elements. For cheating purposes, I'm going to take a screen shot so I can look back at this whenever I need to.

Similarly, CSS has a fixed set of properties. For cheating purposes, here they are.

Note- you will be ignored if you try to invent your own. Like HTML as well, spaces and such will not affect your code. So any way you form it should be fine as long as you don't get lost. 

to go over things again.

Selector { property: value; property: value; property: value }

these are key. You need to have the " : " and the " ; " in order for things to work. 

Selectors are basically like p, h1-h6, color, and so on. 

Properties are things such as background, the color, position, fonts, etc etc. (see above)

Value is what you want it to be. The kind of font, the kind of color, the size and pixels.

Padding. Padding helps a lot, it helps move your stuff over. What needs to be remembered is the box (which I need to work on). I'll include that later in an edit or something to keep track. The video must go on and I must keep up! 

Other things to keep note is that there are also Pseudo Elements! (Huuzah!)

for example -
:link
:visited
:active
:hover

a:hover { and so forth } for link purposes of course! 

Lynda Videos Week 11B

Originally I was uncertain if there would be any trouble since the assigned videos to watch were taken down after the 31st of October, but it's all good because there's still HTML Essential! Going through the videos have given me a better insight about HTML in general. It's always good to be told things more than once, heck even twice, just to reinforce and keep myself in check on what I'm slowly learning and already coming to terms with knowing.

I want to learn a lot more in CSS still, so I plan to watch a whole bunch of videos today and throughout this weekend. Hopefully I can improve and maybe get a head start on how I could potentially make a website dedicated to Kyle Cooper? Whom by the by, I like a lot more now that I've researched on him. Originally when I had seen pictures for his works, I had thought he had only done the typography titles for the movies- but knowing now the actual difference between opening credits and opening sequences, he's really cool in my books.

Moodboard for Kyle Cooper

Let me Tell you some things about Kyle Cooper. Week11A

(Let's get the facts out of the way, shall we?)

Kyle Cooper was born July, 1962 in Salem, Massachusetts. He studied at University of Massachusetts Amherst. Kyle Cooper is a designer of motion picture title sequences. Cooper studied under Paul Rand at Yale University after graduating from the University of Massachusetts, obtaining his Master of Fine Arts in 1988.

If you're unfamiliar with Kyle Cooper still, you've seen several of his works but may not realize it. He is the title sequence creator of well known films like the good old Spider-Man movies, Iron Man, The Mummy, Flubber, Sherlock Homes, and Tron. Several television series he has created title sequences for include The Walking Dead and American Horror Story.

What landed Cooper big time successfully was his title sequence for  the 1995 crime film, Seven. His title sequence became a major hit, and it had inspired many young designers at that time. During that period, title sequences were behind compared to other things like print, music videos, and commercials. He had made the sequence for Seven in order to move forward, above, and beyond the other elements that were moving as well. He was able to raise the bar successfully.

 Still unfamiliar with just what exactly a title sequence is? A title sequence is normally seen at the beginning of a movie, where cast members and key production crew are normally presented as a visually, appealing sequence. Title sequences should not be mixed up with opening credits, which are just simply text based lists of important members of the production. It can be kind of hazy, considering that opening sequences and titles go hand in hand and kind of follow one another in the beginning of a movie or of a television series. Another thing to keep in mind is that a title sequence sometimes includes dialogue and action, while the opening credits just show the cast and crew in writing- which is often accompanied by a song or some very limited acting in the background. A good analogy to compare title sequences and opening credits is HTML and CSS. (haha) HTML is just the script text form, very basic. CSS however is the meat and cheese. It's the creative portion that breaks the tension, so to speak. A lot more goes into sequences compared to the credits.

Kyle Cooper is a co-founder of Imaginary Forces, a successful creative agency in Hollywood. They have created main titles for films and broadcast titles such as the Transformers trilogy films, 500 days of Summer, Mission Impossible, and Se7en. Once Imaginary Forces grew phenomenally, he created an agency called Prologue, consisting of a small group of designers that have created several title sequences of their own, bringing their creativity to the table.

Kyle Cooper focuses on creating strong concepts, and tweaking them while not giving away too much of the story. Keeping in mind to engage the audience, he develops visuals that have relevant, contextual meaning to the rest of the film(abduzeedo.com). He makes sure that his title sequences connects with the film, while also keeping the audience engaged and hooked.

Research websites include:
En.Wikipedia- Kyle Cooper
En.Wikipedia- Title sequence
Youtube- Title sequence vs. Opening credits
Art of the Title- Imaginary Forces
Abduzeedo.com- http://abduzeedo.com/motion-graphics-inspiration-kyle-cooper

Week 10B Outside Work

I DID IT! I MADE THE THING!

With wonderful help from my friend who knows more about CSS and HTML than I do at the moment I was able to for the most part successfully tinker with my original Resume! I'm glad I could work off of my home computer... The only thing I am fiddling with that I don't know how to really fix right now is getting the white background to close within my actual text so I still have boxes. 

I would use w3schools at the moment, but the website unfortunately is down. Here is my proof though that I'm slowly learning! Yay me! 

Week 10 CSS 2.0

I thought I needed to make another version of my HTML 1.0 thing, but this feels more like just telling you about the other options you have, mainly the ID and the Class. While I get the concepts and reading them I do understand what they are, I find it hard to see what is written compared to hearing, seeing what's written, and seeing the changes going on. 

Like I get it the concepts are there, I do get that. It's just hard for me to really concentrate or focus on seeing in my head what things are I suppose. I think I'll do better as I keep watching the Lynda tutorials and videos. Otherwise, here's the result of CSS 2.0

Also I was able to figure out what was wrong with my link, I forgot the "h". For some stupid reason I didn't see it..? I'm blind,what can I say. Must be the Asian in me.

Outside Work Week 10 Cont.

I started watching the introduction videos to CSS on Lynda.com, and would like to hopefully be able to watch them all. I really think that tinkering with CSS and HTML is fun! Time consuming, but fun. The more I practice the more I learn, right? My best friend has been working with code since last September, and she showed me a website she was working on. I got to see how she was doing things, and while it was really neat, there were codes I did not recognize! I'd love to get a chance to get up to par with her amazing skills. 

Outside Work Week 10

The CSS and HTML code progress part 1!

I've been working on it from home, and will be uploading it onto the drive at school come tomorrow. But anyways, here's what I had done (and I'm sure my other classmates too) for the HTML part 1 and CSS part 1. 

Part 2 should be coming soon.... I'm a tad bit behind on my work due to some reasons. Aside from that though, going from what I originally had which was simple text in HTML and lists and things, to something like this is really amazing! 

The one thing I seem to be having trouble with, and I don't understand why at the moment since I've been doing everything the tutorial says, is that when I included the link in the HTML, I provided <a ref="http://www.google.com">Google</a> And for some weird reason it includes the text and does make the color of the font different, but it won't let me click and it won't link me to Google? I'm not sure why that is... Otherwise, things seem to be going smoothly. 

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.