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.
Web & Design Topics
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
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.
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.
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.