|Lesson 4| Headers

I want to paint like Rich Pellegrino. I am on a mission to find a template like his, I think he's using wordpress, it looks familiar. I like his header/logo. It is really appropriate for an illustrator. 

Joey Marsh is another illustrator with an amazingly clean and creative website, not to mention header. It is as if the girl in the header is painting the background as we are clicking around the site, very cool. 

Stuart McReath  is an amazing conceptual illustrator and again, I am choosing another very simple, basic header logo to display. I really like the idea of letting your work stand for itself. 

|Lesson 4-Fonts| & I love Unicorns

I downloaded a ton of free fonts from www.dafont.com today. Lots of fun stuff on there, and I promise I will donate to the designers when I am not a broke college student. ^_^

The exercise was to make a header for our blog with a new font in fireworks, and optimize it for the web. I settled on Unicorn NF, which I found on dafont.com. I love unicorns, they are my favorite animal ever! I used some filters to get my desired look: 

• I used 3 filters:
• Add Noise
• Raised Emboss
• Find Edges

I played around with blending modes, but liked my design the way it was. 

PNG; Bay Bridge at Night

So choosing the best image optimization for this plein air digital painting I did of the Bay Bridge about a week ago was like splitting hairs. The .png was 29kb, while the .jpg without sacrificing quality was about 32kb. Although the paintings are very similar, I think because this one has slightly less blending of hues is what gave .png the slight advantage in this case.

JPEG; Mom's Old Bear

I found the .jpg format to be the best for this still life painting of my Mom's old bear that I did on ArtRage for iPad. Honestly, the 4 up window and optimize options were acting a bit glitchy on my laptop; I couldn't adjust my screen mode to even see the information of the bottom 2 in the 4-up, and also I found that the information wasn't changing as I selected an image and changed the file. This is what I get for completing my homework in the last hour, Murphy's Law in action.

I was surprised that this was a smaller file size than what I think my png sizes were, given the glitchy-ness of it all. Hm, food for thought. Hopefully I will have better luck with fireworks on my desktop. I did enjoy the tutorial on creating a photo-realistic image box, I appreciated the attention to detail in getting the core and cast shadows and highlights in there, very nice.

-Amber

Lesson 3.2 (backwards) Image File Types

1. JPG
1. I'm Lovin' It, On a random search for .jpg examples I found this company's website that does promotional material for McDonald's Ireland. This is a 217kb .jpg file, often the best compression for gradients and rich photo-realistic images. I am guilty of visiting McDonald's in a hunger stricken fury last week on my way from Hayward campus to Foothill for class, why do I occasionally crave this stuff, I felt gross.
2. PNG
1. Web Designers vs Web Developers. I found this info graphic to be hilarious, and at 158kb, a png format is often the best compression for the in-between of photo realism and the super basic graphic. I mean seriously just look at the link, as a wanna-be web designer and a person who knows content developers, there is a stroke of truth and comedy to it 
3. GIF
1. POPA At Work This gif image is offered through wikipedia at only a small file size, 14kb. No higher resolution is offered in fear of copyright infringement. The bottom of the article explains. A basic 4 color image, without any graduating tones or perspective, is great for compressing to gif. 

My thoughts on color schemes in templates...

I have been asked to scour the web and find favorite blogs or templates utilizing the following color schemes:

• monochromatic
• analogous
• complementary
• saturated
• unsaturated

No small task, the inter-web is no small place, but I think I have found some that I really appreciate. 

1. Monochromatic:    wpzoom has a really strong, symmetrical, minimalist theme called photoland that I really appreciate; it is marketed toward the photographer or designer, and I agree as it has a showcase sort of feel. I like it as a portfolio option because it is no fluff, no funny business, let my work stand on it's own in a clean and elegant sort of way. If it were free and not $49 I would try it out.
2. Analogous: I really do have a thing for orange in design, I think it's a big thing right now. This analogous Drakon design is the perfect amount of texture in my opinion, without going overboard; plenty of white space and a neutral grey background to serve as a resting place. 
3. Complementary: call me a sucker for bookish templates I guess but this painted life template really appeals to me. The muted but still complementary color tone adds to the artist's painterly feel for me, and would be a great template for arts education, I feel. 
4. Saturated: Freshie Book  uses saturated colors in the small overall pattern of the background, which helps break up the harshness that can often occur when using a lot of saturated colors. 
5. Desaturated: Samanta by blogger styles has a beautiful desaturated palette in my opinion, with a sparsely used lime green for contrast and emphasis.

I still like my diary template better, but this has been an interesting exploration, bloggerstyles is a great resource for finding blogger templates.

Amber

Apologies for ever-changing layouts

Hm, I was sad to see my Diary template go, I saved it and will revert to it asap!

I chose and edited one of the simple template designs as instructed, and honestly am not a fan of the block coloring look to blogs or websites at all. It was educational playing with different color schemes and choices within the actual editor, though. Practice is essential.

I decided on an "accented analogic" color theme with the "less contrast" preset inside colorschemedesigner.com, a great resource that I will most likely use again. As my blog title is "cumquat" and I identify and like the idea of presenting myself as many of the orange color-qualities; exciting, creatve, fresh, but not as "corporate" as red, I chose a secondary color scheme with a base of orange and a compliment of turquoise. I used tints to tone down the background body, title background, and a shade of the turquoise for the header background as well as the visited links color.

My colors are warm, save for the cool blue-green of the post title background color, maybe I need more cool in there, I was going for warm, but this could be too warm. Repetition is created by the use of cool title background colors and constant warm tones elsewhere, this blue amongst the sea of oranges and red also creates contrast.

Eek, Nerves...

So tomorrow is a big day, I am painting my first (and hopefully not last) live event! Better still, it is part of a time lapse photography demonstration; so I will have an awesome video to share soon. 


Anyways, I need to get to bed for tomorrow, but I couldn't help roughing out a quick interior artrage painting on the ol' iPad to calm my nerves about tomorrow. And now it's time for bed. :)

-Amber

Take 2: Explaining my New Template

I am in love with this Diary template I found at Novo Blogger. It has a warm, personal yet academic feel that is very appropriate I feel to how I want this blog to come across, lol.

1. The template has 2 columns and uses the golden rule of 2/3 of the width for the body and posts, and a 1/3 side bar on the right for the gadgets and things. 
2. The dark emerald green, leatheresque texture of the notebook contrasts the light and warm brown tinged paper that the blog sits on. As far as size is concerned there is a logical hierarchy of the blog title and post titles being the largest and descending in size from the date of postings and gadget titles to finally a small text size for the body of posts. Space and proximity are utilized well; the large posts column has a lot of blank space around the body of the posts, isolating it as important content. Second in priority is the smaller right column, where proximity is much closer, showing that items here are subsidiary to the blog content, and a little more compressed. Space implies time to read over the blogs, the tightness on the right says, "hey, check out this stuff too, if interested."

Originally, the buttons at the top for twitter, facebook, and contact were linked to the designers profiles. I am happy to say that I changed them to my own through editing the html of the template, fun stuff. 

-Amber

Explaining my Layout

I used the customize tab in the template editor to edit the layout of my blog as instructed.

1. My blog has 3 columns. 
2. I designed a 4 column grid to best display the contents of my blog:
1. Column 1 displays my links list
2. Columns 2 & 3 are the body of my blog posts 
3. Column 4 is home to my RSS gadget, my profile, recent posts and members. 

I was conscious of the design principles while editing this layout; a bolder, large print floral pattern in neutral grey contrasts the geometric blocks of bright colors in the blog area. I offset my blog postings with trebuchet font against the hand written style of my titles. 

I left plenty of white space within the blog itself, to increase readability of my smaller font size and create a resting place for the busier background pattern I chose. 

Neutral grays and saturated green and peach colors serve as repetition as well as the use of only 3 fonts. 

Exciting! :)

-Amber

Required Posting: My Favorite Website

So, I have been required to write a post about my favorite website; how often I visit it and what I like about it. Honestly I am not sure what my favorite website is, but if I had to say what website I visit most often it is likely facebook. I think on a scale of 1-10, 1 being I visit facebook once a month and 10, I am on facebook continually throughout the day (you know who you are), I am maybe a 6? Sure with my iPhone it is tempting to check into each and every notification when someone has posted to my wall/commented on a picture/liked something I have liked, etc...but I try and remember to be absorbed with life in my physical surroundings and not what is on my phone screen; it is terrifying to think that life is passing by as we stare at our phones, although sometimes temptation gets the best of me. 


In all however, for keeping in touch with friends around the globe, and promoting myself as my own brand and my creative endeavors, my most visited sites are definitely the social networks. I try and keep up with facebook, twitter, google +, and instagram. More and more these days to let people know what I'm up to creatively, as I see the start of a professional career (if you can call it that) in my art nearing closer and closer. My "meet my friends" links list on the page are the blogs and websites of a few close friends that I am proud to support, and am happy to follow their personal and creative endeavors, it's nice to have physical connections to all of the on-line things we keep up with these days. 


I acknowledge that I have diverted answering the general question posed; my favorite website. I view most of the sites I visit as a duty, or necessary to my artistic growth, so for now I will say that I just appreciate many of the different facets that the web has to offer. I also have a healthy respect for stepping away from our electronic devices and enjoying the simple beauty of the day. I hope we can all remember to do that, once in a while. 


-Amber

About this Blog and Myself

Hello fellow web design students, welcome to my blog. I look forward to sharing and learning from, and with you all this quarter at Foothill. 


I'm Amber, 25, Graphic Design student transferring to CSU East Bay next quarter, Spring 2012. This class is on the transfer equivalency form so it is required. As a design student I also have a huge interest in learning web design. I have been developing my fine art, digital art, and design fundamentals over the last year, plus some, but have yet to explore web design, so I am very excited as I feel it is necessary to learn and be able to offer. 


I am also looking forward to utilizing what I learn in this course on my own website, ambermyerscreative.com, which I am still fumbling through wordpress to design. My goal is to have a really beautiful online portfolio to grow as a student, and offer to prospective clients or employers in the future. Ultimately, I want to work for myself as a creative designer and so learning web design is a very necessary service to offer. 


I also love plein air painting, traveling (though it's mostly in my imagination for now), helping shelter pets, being pescetarian, and playing pretend chef in my kitchen. 


Thanks for reading!


Amber