About the Interface

Typography

Theme Options

• Upload logo and favicon images
• Choose between two color schemes (Light & Dark)
• Enable or disable the Quick Contact Module
• Enable or disable the portfolio slider on the home page and select how many recent portfolio items to show
• Choose between two different portfolio sliders (Large & Small)
• Enable or disable the Home Page Body Copy Module with associated widget ready sidebar
• Enable or disable the Home Page Blog Posts Module with optional slider
• Globally set location of your sidebar, either right or left
• Enable or disable related blog posts, author bios and blog post featured image

Portfolio Custom Post Type

• Publish as many portfolio items as you see fit.
• Write case study text and client testimonials
• Enable related case studies (a total of four displayed randomly based on shared taxonomy) on a post level.
• Choose your gallery type on a post level (featured image, stacked images, slider images, video)
• Stream videos from YouTube, Vimeo or your own self hosted FLV or MP4 files with in post preview of videos
• Enable or disable availability messaging on case study pages, portfolio pages or both
• Chose between three different portfolio templates (grid, 2 column, 1 column) all with built in filtering of taxonomies
• Create as many taxonomies as you see fit.

Blogging Solution? No problem!

WordPress 3+ ready, willing & able!

• Two WP 3+ navigation menus
• Six widget ready sidebars
• Six custom widgets including Twitter Feed, Flickr Feed, Contact, Testimonials with slider, Tabbed Content and Recent Projects
• Author archive
• Custom templates for portfolio and contact pages
• Two page templates

Three Column Example

Four Column Example

— Vinnie Barbarino

— Boom Boom Washington

— Arthur Fonzarelli

— Jaime Sommers

— Pinky Tuscadero

— Chico Rodriguez

— Laverne De Fazio

— Laverne De Fazio

— Jill Munroe

— Barney Miller

Header 2 Tag & Image Aligned Left

Header 3 Tag, Image Aligned Center & Unordered List

• Unordered lists are used to semantically markup an unordered list
• An example unordered list is your grocery list
• Another example may be a to-do list, though some people like to order theirs
• The next section will have an example ordered list

Header 4 Tag, Ordered List, Pre and Code Tags

1. Ordered lists are used to semantically mark up ordered list
2. An example ordered list would be a Top 10 list
3. This wraps up the ordered and unordered list examples

body { font: 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif; }
.wrapper { position: relative; width: 960px; margin: 0 auto; overflow: hidden; }
#vertical-grid, #page-content { position: relative; width: 100%; }
#vertical-grid { padding: 40px 0 0; }

Header 5 Tag & Blockquotes

Blockquotes are used to separate a quoted item from the remainder of the content. Artisan Creatif comes with four different types of blockquotes. This is a standard blockquote. You also have access to a pull quote right class, a pull quote left class and a testimonial class.

Header 6 & Address Tag

Here is an example right pull quote. You can easily accomplish this by selecting this text and selecting Right Pull Quote from the Styles drop down select option.

This is an example left pull quote. By this point, you are getting the picture

What about columns?

• Two Columns
• Three Columns
• Four Columns

What about some cool jQuery effects?

Conclusion

— Steve Austin

— James Walker

The impetus behind Periodic

Periodic Theme Features

Purchase Periodic for $35

The Goal

Step 1: Get the latest version of jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>

Step 2: Write the HTML Markup and CSS Styles

<ul id="portfolio-list" class="clear">
	<li><a href="#" title="Koopon Website Design"><img src="images/koopon.jpg" alt="Koopon Website" width="210" height="140" /></a></li>
	<li><a href="#" title="Patriot Pride Corp Logo Design"><img src="images/ppcorp.jpg" alt="Patriot Pride Corp Logo" width="210" height="140" /></a></li>
	<li><a href="#" title="Mazaif Packaging Design"><img src="images/mazaif.jpg" alt="Mazaif Packaging" width="210" height="140" /></a></li>
	<li><a href="#" title="Women Working Logo Design"><img src="images/womenworking.jpg" alt="Women Working Logo" width="210" height="140" /></a></li>
</ul>

.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
#portfolio-list li { float: left; margin: 0 10px; }
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid #4f8603; width: 210px; height: 140px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: #315301; }

Step 3: Write the jQuery to animate the portfolio

jQuery(document).ready(function() {
	jQuery("#portfolio-list").delegate("li", "mouseover mouseout", function(e) {
		if (e.type == 'mouseover') {
		jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "0.3"}, 300);
    	} else {
		jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "1"}, 300);
   		}
	});
});

Conclusion

The design mantra? Retro & Vintage.

My sources of Inspiration

Hand drawn etchings

Inspiration from vintage textbooks

Graphic Ornaments & Typographical Variations

Inspiration from those who came before me

1. Simon Collison
2. The New York Moon
3. The Dollar Dreadful Family Library
4. The Blizzards
5. Bearskinrug
6. The Ernest Hemingway Collection

Having fun with @font-face

A sprinkle of jQuery for personality

Conclusion

Why did we call ourselves “Pixel8” in the first place?

I can be incredibly stubborn when it comes to something I really like.

Time to make a decision

…We Are Pixel8 just felt right immediately

Our proper new name needed a proper new logo.

The anatomy of our first logo.

1. The modern, custom letter forms as they felt strong and commanding
2. The custom “x” with the pixel character as a brand identifier
3. Keep the logo color palette at two colors

Version 2 is close but not a winner.

1. The pixel on the stem of the “p” would get lost when the logo was reduced in size and therefore would become difficult to read. That doesn’t help with clearly defining our name.
2. The linear shape of the first logo was starting to look very “box” like, constraining, cold and impersonal in this version. Though it is definitely modern, it felt like it was spit out by a computer program and I did not want that.
3. Though the talk balloon worked on the website, it doesn’t work her as a logo. To me, it read “pixel8 we are” as opposed to “we are pixel8”. I moved this element around to several locations, but nothing worked and it was time to file this version under unusable.

With version 3, I was going in the wrong direction.

1. The new letter forms became even more box-like than the previous and no longer worked for what I was trying to achieve.
2. I needed to drop the “incorporated” from the logo as it was superfluous.
3. The one aspect I liked was adding bright colors to the mark and dividing the pixel icon into four separate pixels. This felt like it should definitely be a part of the design as well as the “x” character

The fourth time was the charm

1. The letter forms were now set in Helvetica Neue with kerning between the letters, slight modification of the “p” character and set in varying weights for contrast
2. I kept the shape created in version 3 as this was the best of that version
3. The pixel icon now took on a 3-D look and feel and was reduced to the 3 strongest colors from version 3

Method 1: Use blending modes to enhance the color.

Method 2: Change the mood of an image with a Curves adjustment layer.

Method 3: Use High Pass filter and Blending Modes to sharpen a black & white photo.

Conclusion

Step 1: Mark up your form

<div class="wrapper">
	<h2>Sign up for our Newsletter</h2>

	<form id="simple-form" action="" method="" name="">
		<label for="input-1">Name</label>
		<input type="text" name="input-1" id="input-1" />

		<label for="input-2">E-mail</label>
		<input type="text" name="input-2" id="input-2" />

		<input type="submit" name="submit" id="submit" value="Submit">
	</form>
</div>

Step 2: Add some basic styles to your page.

body {
	background-color: #ececec;
	color: #565656;
	font: 62.5% Helvetica, Arial, sans-serif;
}

.wrapper {
	margin: 0 auto;
	position: relative;
	width: 320px;
}

h2 {
	font-size: 2em;
	margin: 25px 0 0;
	text-align: center;
}

Step 3: Add the CSS3 magic to your form.

form#simple-form {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-box-shadow: 2px 2px 10px #ccc;
	background-color: #fff;
	margin: 25px auto 0;
	padding: 25px 10px;
	text-align: center;
	width: 260px;
}

• The distance of the shadow on the x-axis (2px).
• The distance of the shadow on the y-axis (2px).
• The amount of blur radius to apply to the shadow (10px) with 0 being sharp.
• The color to apply to the shadow (very light gray).

form#simple-form label {
	display: block;
	font-size: 1.65em;
	font-weight: bold;
	letter-spacing: -0.025em;
	margin: 0 0 5px 15px;
	text-align: left;

}

form#simple-form input#input-1, form#simple-form input#input-2 {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	background-color: #eaeaea;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));
	border: 1px solid #cacaca;
	color: #444;
	font-size: 1.4em;
	margin: 0 0 25px;
	padding: 8px 10px;
	width: 240px;
}

form#simple-form input#submit {
	-moz-border-radius-bottomleft: 32px;
	-moz-border-radius-bottomright: 32px;
	-moz-border-radius-topleft: 32px;
	-moz-border-radius-topright: 32px;
	-webkit-border-bottom-left-radius: 32px;
	-webkit-border-bottom-right-radius: 32px;
	-webkit-border-top-left-radius: 32px;
	-webkit-border-top-right-radius: 32px;
	background-color: #dedede;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #dedede));
	border: 1px solid #dedede;
	color: #484848;
	font-size: 1.65em;
	font-weight: bold;
	padding: 10px 15px;
}

The Demo

Post Gallery Example

Step 1: Create you gallery

Step 2: Get the images ID

1. Click on the Media link in the Admin sidebar.
2. Click on the image you would like to get the ID for.
3. In your browsers navigation bar, you will see an URL that contains the ID number.
4. Repeat for all images ID's.

Step 3: Edit the gallery shortcode