Illustration Portfolio

Web-Site Portfolio

Carlo Spagnola
Carlo Spagnola

www.carlospagnola.com

Client: Carlo Spagnola-Artist

This site was built using HTML, CSS, JQuery and SimpleViewer plug-in. The site was designed as a portfolio site for a friend and amazing artist, Carlo Spagnola. The home page is created using a simple JQuery image slider to display some of his latest creations. I was able to build a gallery page using SimplerViewer to display more of his artistry. Also, I added a page with embedded YouTube videos that he created that show his creative process. Lastly, I added a form page where anyone can add their contact information and send Carlo a message if they are interested in hiring him for any projects.

Shear Passion
Shear Passion Salon & Spa

www.shearpassionsalon.net

Client: Shear Passion Salon Owner Laura Boczon

This site was also built with HTML, CSS and Javascript. Because of Laura's personality, I suggested a more colorful design scheme and she liked this idea. So I devoted more time to the graphic design side of the site. We used a wide range of green's along with black and white for the text. The home page has JQuery animations displaying an illustrated version of Laura, a welcome message and finally the sites Logo. I also did photography for the site and the second page features a photo gallery of the inside of the salon. This site also has a responsive design with a mobile layout for smaller screen sizes. Illustrator was the main program I used to create the graphics for this site.

Web & Design Topics

HTML5
A new ship has landed on Planet HTML

HTML5

New semantics

Like it or not, HTML5 is here! HTML5 has been a perfect thing for me to learn in conjunction with the broader topics of web-development. I think one of the most important changes is, semantic, meaningful mark-up. In this page alone there are only 2 div tags used. Everything else is comprised of Header, Section, Figure, Article, Aside, Hgroup and Footer. These enable the developer and anyone else reading the code to easily find most any part of the web-page just from the tags alone. Also it helps browsers find content faster...which means faster pages! These tags have helped me organize my HMTL much more efficiently and I believe it can do the same for your web-site! For more information, check out Lynda.com's HTML5 videos by James Williamson, I find him to be an excellent teacher for learning to code HTML & CSS

CSS3
Protecting users from stale web-sites

CSS3

A cooler looking web

CSS3 has some great features! And what an amazing list of things it has added to our styling arsanel. Let me start by talking about the attributes I used in creating this site. On my home page You saw planets that acted as links to the other parts of the site. These were created as buttons in HTML, then styled using the new border-radius feature that allowed me to get the circle/half-circle effect I was looking for. The backgrounds were then added using artwork I created in Photoshop. As you hover over these buttons they increase in size. I used the new transitions and transforms available in CSS3 for this effect. I had to effectively "pin down" the top and bottom parts of the larger buttons so they did not protrude into the header/footer areas during their hover transform. The spaceship was a .png image with a CSS animation applied to it to get it across the screen. There are many nuiances to be aware of, especially, that the HTML element gets the transition declaration (-webkit-animation-name:fly;). Then the hover state, or whatever you want to trigger this effect, gets the transform properties (-webkit-transform: scale(1.2);. Also vendor prefexis are required to get as close to 100% browser support as is possible. Internet Explorer has problems with handling the animations but you will see the end result of transform nonetheless.

CSS3
Discover the Magic!

JQuery

Functionality

JQuery is amazing! I will not pretend to be an expert by any means, but the carousel I built at the top of the page was powered by JQuery and another library called Roundabout.js, I will list his site in the sidebar, check it out, its very easy! I will admit, I would love to be a Javascript ninja, being able to customize programs to meet the needs of each project, but, alas, I am not. JQuery gives me the ability to use the mountain of functionality built into the library for my benefit without having to understand the technicality of Javascript. It is nearly impossible to build a cutting edge web-site without some user interaction. CSS3 allows for some of that but Javascript and JQuery take it to the next level of amazingness! It is going to take a lot of hard work before I consider myself proficient in the scripting languages/libraries but I plan to put that work in and look forward to learning whats out there.

Illustrator
Create whatever you can imagine!

Illustrator

Clean Vector Art

Adobe's Illustrator is an amazing piece of software. As an Illustrator myself, I have found it very easy to grasp and utilize it to create the images I desire. I have always enjoyed comic-book art and this is the kind of art I find myself creating when in Illustrator. Also if I am to create a Logo for a client, I will probably start the concept in Illustrator and either finish it there or export it to Photoshop for the finishing touches. All of my work in the carousel found at the top of the page was created in Illustrator. The Pen Tool is by far my most used tool. It gives the freedom to create clean vector lines that conform to whatever shape I can imagine. I also love working with Gradients, using them for shading and lighting. The Object->Reflect Panel is remarkably useful when creating symmetrical art as you can design one side of the image then Reflect it as a copy of itself for the other half. Also the Appearance Panel is very useful in adding strokes/fills and targeting them by themself for editing. Adobe's Kuler.com has helped me create color schemes for my digital illustrations, check it out today if you havent already.

Illustrator
Beautiful Bitmaps

Photoshop

High Fidelity

Adobe's Photoshop has long been a software that I had a hard time embracing. Illustrator was so intuitive for me and it was very hard for me to try to be productive in Photoshop because things were not the same. I have made some good progress lately with the help of Deke's Techniques on Lynda.com. Now I am creating high-fidelity sci-fi scenes with stars, planets and space gas quite quickly. For so long I trained myself to create each line of artwork by hand, but now I realize that Photoshop can function differently with all of its filters and effects within a few mouse clicks. Deke taught me how to render some other very cool effects such as Gold, Chrome and Branded editable fonts. All in all I think I prefer the pen tool in Illustrator for creating images but the amazing fidelity and clean appearance of Photoshop images has inspired me to delve deeper into its vast pool of functionality.

Flash
Not Dead

Flash

Still great!

Flash is an amazing piece of software, lets not forget that when being quick to discuss its demise. It was the forerunner in web video and interactivity. With the introduction of Canvas in HTML5 and transitions/transforms in CSS3, not to mention everything Javascript and JQuery bring to the table, it is easy to envision a day that Flash will be substantially less effective, or perhaps a better word is, efficient at what it does. Does that mean we should turn our backs on it, I think not. Flash still makes many things easy to do. Game engines and interactive web-sites/stories are still efficiently created with Flash. I admit I have not used it lately but when I began using it I was floored with its functionality. I will link to some of the things I produced in Flash in the side bar. Also, I will include links to some of my favorite Flash tutorials. There is still utility to be found in Flash, don't give up on it yet!