Browser Awareness

The template I had been working on is now green lit to be used as my new website. I figured that if I’m going to invest this amount of time to develop a working website, I may as well give it a foothold and opportunity to be seen and appreciated by others; especially potential clients.

Hours into the design I was forced to fix a significant number of issues with the layout. These issues were discovered when I moved away from designing the site using the laptop. I turned on my desktop computer (that I normally use for painting) and saw that almost everything was hugging the left side of the browser window. I missed a crucial step in the prototyping stage and am now had to solve it. This is why, all web designers, check their previews in multiple browsers and at least more than one computer. I am glad I ran into this sooner rather than later.

At this point, the project weighed in at about 30+ hours so far. I have run into a series of issues that have forced me to think critically to find solutions. This project will be a prime candidate to write a Case Study about. These posts will effectively produce the research material I will use for the Case Study.

Regarding the contact page; I embedded a functioning Google map. Although I do not intend to have clients come to me physically, I figured it is good practice as some businesses I may contract for might need this feature.

A Paradigm through Conversion

Progress on the template is along smoothly. I finally understand the 960 grid system beyond of its basic concept. It is actually really simple once you get used to it. Also, something of a milestone; is the fact that I don't have to work in Adobe Dreamweaver using Design or Split view modes anymore. I am almost exclusively building the template directly in Code view mode.  

I know this probably seems trivial, but I think of it as a sign of growth; a paradigm in my way of thinking and my overall opinion of Web Design as a creative medium. Maybe there actually is potential to express myself as an artist in a programmatically dominated environment.

Regarding the template; I have added a functional navigation and respective pages. They are, however, mostly lacking in content. As of this writing the 960 grid is used on every page. I made some major changes to the navigation. It is now cleaner and uses CSS formatting instead of images. This is preferable as it reduces the load time of the entire website; the less images used for the interface and layout, the better.

The tutorial I'm using for reference describes how to make a WordPress template from the design, upon further inspection; this is not actually covered in the tutorial, it is only suggested as a possibility. However, turning static HTML/CSS websites into functioning WordPress themes could be very lucrative.

The 960 Grid

I have encountered the 960 grid system before, when modifying pre-designed web templates for clients in the past. Mostly I have only been exposed to it via a CSS file called grid.css or 960.css. In the past I did not know what to make of it. Looking at those CSS files I noticed a series of classes called grid, prefix, suffix, push and pull; and all of them had derivatives (grid_1, grid_2, etc.). As it turns out, the 960 grid system is not an actual component or element of CSS, but a stylesheet created for ease of work.

What the stylsheet essentially does is offer a designer a pre-built group of classes that effectively divides a 960 pixel wide block into either 12 or 16 columns. So I am relieved to now learn it has a presence within the Photoshop Web Design community. I found a Web Design tutorial that uses this grid and dove in. Going forward I will be applying this gird to all my designs.

The template I created, using the 960 grid, is a beast! It is a Layered Photoshop file, weighing in at 56MB and it has given me some great ideas on how I can modify my other templates I’ve made. It took me pretty much an entire day and that was only the layout/template. The content is mostly filler with the exception of the graphic slider image I made.

High resolution version of the template viewable here:http://psypher101.deviantart.com/art/Portfolio-2-Photoshop-layout-393771255?ga_submit_new=10%253A1376694657

A Major Change

That's it... I'm switched majors. After a confusing re-admissions effort I am officially returning to school on September 30^th.  I am no longer chasing the Game Art & Design dream, it's too risky and with all the layoffs in the industry I'll be competing for the same jobs with people that have a lot more experience than I will. So I’ve decided to go Graphic Design & Web Design.

I already freelance as a Graphic Designer and have historically refused Web Design jobs, due to the fact that I did not enjoy the work. The fact of the matter is I did not enjoy it, because I am not an expert. Just like anything in life, if a person does not excel at a specific type of work it has a tendency to become frustrating, but also; with a proper amount of tenacity and dedication said person will eventually become skilled at that task.

If I get the proper training strengthen my skills in this field then I will be able to earn a significant amount of money. And the best part is that as a Web/Graphic Designer I can work from anywhere in the world. Don't worry, though, I will continue improving my painting skills. And one day I will be published. My manuscript isn't going anywhere. For now, however, Web Design projects and experiments need to take center stage.

PSYPHER101 website facelift

Any of you that follow me on Facebook will know that I'm going through the process of completely redesigning my official website. The entire project is more about the journey than the destination. Granted, I want the final result to be absolutely functional and hit on every mark, it's the process that is the focus here.

I am an artist who is familiar with Web Design, but have never actually touted myself as an actual Web Designer. Now, however, as I am preparing to return to school with Web Design & Graphic Design as my focus; the technologies and commonly used practices are ebbing to the surface of my schedule.

Selma's Appaloosa (final)

A couple years ago my wife and I took a trip to Utah, to visit family. During this time I was introduced to her grandmother on her father's side. The elderly woman is named Selma. Selma suffers from Alzheimer's and spends her days in a hospital. Worst of all is that almost none of her family ever visits her. She's in the hospital, alone, day in and day out.

When Jamie was talking to her she described how I am an artist and I promised Selma I would paint her something. Then we got home and I started doing research; asking Jamie what types of things Selma liked. I learned that Selma had a pair of Miniature Schnauzer's, a gray one and a black one. I also learned that she had a special place in her heart for Spotted Appaloosa horses.

This painting is the result of that. Below I will describe the process.

This is the rough sketch. Here all I tried to do is figure out the perspective and angle of the horizon line. I opted for a canted angle to heighten the dynamic.

I brought in 3 photos, one for the distant background, another for the tree in the midground, and a third for the grass in the foreground. Here I also introduced the second dog sketch.

I blocked in some basic value for the black Miniature Schnauzer, using photo references to understand the pattern and coloring of the coat.

Here I blocked in the value for the gray dog.

Using the smudge tool in Corel Painter, I softened the pattern on the Appaloosa and painted in more contrast of value on the horse.

What happened to the horse? I wasn't happy with the composition so I extracted the horse into a new layer and painted it out of the background.

I did the same for the gray Mini Schnauzer.

Here I bring the missing elements back and establishing a more triangular composition.

At this point I drastically changed the gesture of the Appaloosa. I also started painting in color in Photoshop, using the Color blending mode. I then created a new layer above the others and started painting in the lighting.

FINISHED. By this point I had done considerable work on the whole piece. I completely reworked the tree in the background. Painting in leaves using 2 different scattering leaf brushes with 3 different hues. After the leaves were in place I painted segments of branches that weren't obscured by the leaves and finally added sections where the sky would be visible. I also added a cast shadow under the tree. In the foreground I added a lot of flower photo textures. I think it adds a lot to the entire piece. Finally I spent some time dialing in the lighting, making sure to pay close attention to bounced light.

Viper 3

Here's a little story about a character from my book who, until a few days ago, was only a faceless figure vaguely described in the words of my  manuscript. Before I continue let's have a look at him.

This illustration makes use of advanced overlay layers for texture.

Viper 3 is his designation. He has no name and when you read the book you will understand why. Viper 3 is a soldier in the Elysian army. More specifically, he is a member of the elite division of the Elysian military called Viper squad.

Viper squad is the fictional equivalent of the British SAS, though much fewer in number. They train in all the combat skills that every other Elysian soldier does, but hold themselves to a much higher standard. That training is supplemented with advanced political and espionage training. These guys are not only dangerous on the battlefield, but also from the shadows and the crowds of any city in Giaos, even during times of peace.

They answer only to Emperor Tiberius Elystar.

The weapon that you see Viper 3 carrying is a type 1, variant 2, mass driver. This firearm delivers arcanium infused slugs at blinding speed. Before the invention of these devices the most advanced weapon was the bow and arrow. The variant 2 mass driver basically fires explosive shells, granted the explosive element is derived from the mystical element arcanium.

Now, for the development process of this illustration.

The drawing started as an doodle in Alchemy. At this point there was no goal with the design, just sketching random shapes.

Then my friend Dima, who was hanging out that night, saw what I was doing and asked to play with Alchemy. I let him, embracing the concept of not falling in love with my work. It was his idea to give the character 4 arms. At this point the figure had no place, just a continued doodle.

I imported the sketch into Photoshop. Here I threw in a photo of an overcast horizon I found via a Google image search. I then started painting in the value and refined geometry of the figure. I also removed the second set of arms. Sorry Dima. At this stage I had the idea of making this piece a supporting asset for my book. Thus the addition of the lion facade to the gun.

I added color through an overlay later, keeping the same value from before. I went with a bluish grey for most of the armor, with golden yellow accents and finally red for the fabric and top of the helmet.

Credit: The final piece has specific aesthetic elements from a steampunk rifle I found on DeviantArt. It's hands down one of the coolest guns I've ever seen. Check it out here: http://johnsonarms.deviantart.com/art/Steampunk-Rifle-Outdoors-Photo-2-284228206