Archive for the ‘Design’ Category

Javascript Canvas Color Series Aug 9 2012

I made these using the <canvas> tag and Javascript.  Which one do you like the best?  What do they make you think of?

 

Welcome to my new site [design] Jun 20 2012

Chair and checkered tile floor at Cafe Helloakland
Chair and checkered tile floor at Cafe Helloakland

Since it’s almost my 36th birthday, I decided it was time to update the site theme for my personal site, www.gabrielserafini.com. I wanted the new design to focus on framing content in an aesthetically pleasing way. The background changes on each refresh, and uses CSS transformations and translucencies to create a lovely effect.

There are still a lot of rough edges to it, but it was important to me to get it out there.

You are here.

Evolution of a stadium billboard advertisement Aug 28 2009

One of my clients (ARMS – Athlete Relationship Management Software) needed a billboard design to be displayed in a university stadium.  Here are some of the revisions we made, going from the first draft to final version. The requirements were to build two square billboards, one 24″x24″ and the other 8’x8′.

First version:
In the first draft, I simply pulled elements from the existing ARMS website and adapted them for use in a square billboard. This involved scaling up the background gradients and building the rest of the artwork from the original elements — logo files and fonts to ensure maximum crispness when printed.
ARMS Billboard - First version

Second version:
In the next revision we decided to emphasize the software messaging by putting the URL into an easily recognizable button element. We also substituted some different language in place of the website’s tagline.
ARMS Billboard - Second version

Third version:
Changed the button color to blue to stand out more against the orange background and adjusted the wording to be more concise and less crowded.
ARMS Billboard - Third version

Fourth (final) version:
In the final version, I made a number of final tweaks to the design, including emphasizing the logo highlight more so it will show up better when viewed at a distance. I also whittled the marketing message down to 3 simple bullet points, more easily read by the intended audience — coaches and athletic directors. A final increase in the height of the button helps the URL to stand out a bit more, and some bottom gradient arcs help complete the design and add additional movement and interest.
ARMS Billboard - Final version

The final full-size Photoshop PDF for the 8’x8′ 150dpi file is 46.6 MB, compressed into a ZIP file only 6.9MB.

Learn more about the leading Athlete Relationship Management Software.

Vogon Poetry is now available in the App Store! Apr 11 2009

Click here to get Vogon Poetry

I’m proud to announce the immediate availability of our Vogon Poetry application for iPhone and iPod Touch. You can get it in the App Store for $2.99.

Click here to check it out!

Going to SXSW in Austin, TX this year Mar 12 2009

Got the badge! #sxsw

Finally I’m going to SXSW in Austin, TX this year. Now I get to be one of the cool kids. Or something like that.

Pictures from the trip:

How to: Get rid of widows in your WordPress posts with Widon’t plugin Feb 20 2009

I was just working on making some updates to the backend WordPress code for the Principia Pilot website (http://principiapilot.org/) and noticed widows in some of the stories.

Widows are the typographic term for a single word on a line at the end of a paragraph. I thought about the solution to this problem (basically add a non-breaking space before the last word of a paragraph) and then realized probably someone had written a plugin to do exactly this.

I tried two different plugins and like this one the best because it doesn’t overwrite the rest of the excellent WordPress typographic niceties like converting straight quotes to curly quotes:

Widon’t Download latest version here

How to: Automatically add a default set of Custom Fields to each post in WordPress Feb 12 2009

PrincipiaPilot.org screenshot showing Custom Fields being used in a template

One of the neat things about WordPress is how easy it is to add custom metadata to a given page or post that you can then use in a template to display structured information. I’ve been using this technique for a while now to extend the basic WordPress elements of title, body, excerpt, etc and allow the creation of easily editable information-rich content.

Before now I’ve used the built-in WordPress Custom Field functionality in the Add New screen where you select previously created custom fields from a drop-down list that is limited to only showing 30 items. This is quite cumbersome as you have select each field you want to add to the entry and enter the value, click the Add Custom Field button, then repeat for however many custom fields you want to use. Needless to say, this can be frustrating to have to remember to do every time, especially for non-technical clients.

The Old Way:

Selecting a Custom Field (the old way)

During a recent site conversion to WordPress that involves 4-6 custom fields for each post, we finally decided that there must be a better way, and ended up finding a WordPress plugin that is so good that it should probably be added to WordPress core, it is so highly useful. The plugin is called Custom Field Template and is developed by Hiroaki Miyashita.

The New Way:

Custom Field Template WordPress plugin screenshot

Using a simple set of options to define the template you want to use is easy. After downloading and activating the plugin, go to Settings > Custom Field Template to define your template. One is provided for you to show you the possible template values. You can set up two separate custom field template designs.

This is the code used to generate the Custom Field Template form shown in the screenshot above:

Template Instruction

<strong>Story Template Metadata Instructions <em>(All fields are optional)</em></strong><br /><br />
1. Use this form to enter metadata about this story.<br />
2. Each item will get assigned to the correct Custom Field for use in the display template.<br />
3. Click the <strong>Save</strong> button to save the values.<br />
<br />

Template Content

[summary_deck]
type = textarea
rows = 3
cols = 50
label = Summary Deck:

[byline_writer_name]
type = text
size = 35
label = Byline Writer Name:

[byline_writer_title]
type = text
size = 35
label = Byline Writer Title:

[byline_writer_picture_url]
type = text
size = 54
label = Byline Writer Picture URL:

[lead_photo_caption]
type = textarea
rows = 3
cols = 50
label = Lead Photo Caption:

[lead_photo_credit]
type = text
size = 35
label = Lead Photo Credit:

[lead_photo_url]
type = text
size = 54
label = Lead Photo URL:

Then set this setting to true by checking the box to make the form look prettier:
Custom Field Template WordPress plugin setting

Next, I tweaked the Admin CSS settings to right-justify the labels:

#cft dl { clear:both; margin:0; padding:0; width:100%; }
#cft dt { float:left; font-weight:bold; margin:0; padding: 0 8px 0 0; text-align:right; width: 20%; }
#cft dt .hideKey { visibility:hidden; }
#cft dd { float:left; margin:0; text-align:left; width:70%; }
#cft dd p.label { font-weight:bold; margin:0; }
#cft_instruction { margin:10px; }

Click Update Options to save the settings and then go to Posts > Add New to see the form in action. You may need to go back and forth a couple of times to get your text field sizes just right and to put them in the right order you want them in.

Using the Custom Fields in a template

So how do these values get displayed on your page?

Simply edit your template PHP file to look for custom field values and then display them where you want them if they’re present.

This is how I do it for the Principia Pilot site. This code goes at the top of the template for single.php

<?php
// Retrieve custom meta values from post if they're present
$byline_writer_name = htmlspecialchars(get_post_meta($post->ID, "byline_writer_name", true));
$byline_writer_title = htmlspecialchars(get_post_meta($post->ID, "byline_writer_title", true));
$byline_writer_picture_url = htmlspecialchars(get_post_meta($post->ID, "byline_writer_picture_url", true));
$lead_photo_url = htmlspecialchars(get_post_meta($post->ID, "lead_photo_url", true));
$lead_photo_credit = htmlspecialchars(get_post_meta($post->ID, "lead_photo_credit", true));
$lead_photo_caption = htmlspecialchars(get_post_meta($post->ID, "lead_photo_caption", true));
$summary_deck = wptexturize(get_post_meta($post->ID, "summary_deck", true));
?>

Now each of the possible Custom Fields are available as PHP variables that can be checked for content.

This code example shows the “summary deck” being displayed on the page if it has been entered on the create content screen:

<?php
// Show summary deck if we have one
if ($summary_deck != "") {
    echo '<h3 class="summary-deck">' . $summary_deck . '</h3>';
}
?>

Using this excellent plugin, you can set up select lists, radio buttons, check boxes and more to help you populate your Custom Fields more easily if you prefer that to using simple text fields. You can also specify default values to use for the custom fields so you don’t have to type them in every time.

Plugin Default Template Options

These are the default options included by the plugin:
[Plan]
type = text
size = 35
label = Where are you going to go?

[Plan]
type = textfield
size = 35
hideKey = true

[Favorite Fruits]
type = checkbox
value = apple # orange # banana # grape
default = orange # grape

[Miles Walked]
type = radio
value = 0-9 # 10-19 # 20+
default = 10-19
clearButton = true

[Temper Level]
type = select
value = High # Medium # Low
default = Low

[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
mediaButton = true

Which displays a form that looks like this:
Custom Field Template WordPress plugin screenshot - Default form options

Summary

This plugin addresses a key need when using Custom Meta Fields in a WordPress custom template design — making it as easy as possible to enter values time after time on multiple pages or posts. There are a bunch of other neat options this plugin offers to make the authoring experience even easier. This is now on my “must install” list of essential WordPress plugins.

Please support Open Source by donating to the plugin author

If you use this and like it, I highly recommend sending a nice donation to the plugin author to help support ongoing development and to say thanks. This plugin will save you and your clients a lot of time and frustration. Thanks Hiroaki!


Requirements

Requires WordPress 2.1 or higher.

Click here to download Custom Field Template plugin from WordPress.org

150 open documents in Photoshop – long day of work May 14 2008

screenshot
This is after a long day of work building out a new website: TeamMercy.com. Lots and lots of graphics there. Good times.

Christian Science Cross and Crown logo – How to get a high-quality vector EPS or PDF version for use in your design comps Apr 29 2008

Let’s say, hypothetically, that you are a designer, and are working on a design comp for a Christian Science church or reading room, and you wanted a high resolution vector version of the logo to use in your mock-up so you didn’t have to chop out background garbage out of some low-resolution version of the logo you found on the web somewhere. What should you do?

In the Cross and Crown trademark licensing documentation, you will find the following instructions:

Two approvals are necessary:
(1) for your type of use (sign, etc.) and
(2) for the actual form of your use (how the sign appears).
Therefore, if you already have a sample or mock-up of the proposed use, please send it by e-mail or regular mail along with the Request Form, so both approvals can be done simultaneously. It will save you time later.

Unfortunately, they do not currently provide any links to a high-resolution version of their logo for purposes of laying out a design, which would be very helpful to all the designers out there trying to help their clients prepare a mock-up of the proposed usage.

Update: I’ve removed the instructions for how to extract a vector version of the logo out of a PDF since they’ve changed the PDF available on their site to only include a raster version now, and it would probably be more helpful to more people in the long run if they hear the need for a vector version for placement in design comps from a number of people rather than trying to work-around the system they’re offering.

My suggestion is you contact the trademark administrator directly and request a vector version of the logo if the high-resolution JPG version of the logo isn’t sufficient for your usage. Their email address is trademark@csps.com.

New site design is live (also upgraded to the latest version of WordPress – 2.5) Apr 1 2008

New site design is finally live!

In preparation for upgrading a whole mess of sites to using the latest version of WordPress I decided it was time to finally upgrade my own site and to implement the new design I’d been working on for a while (for over a year now).

Check it out: www.gabrielserafini.com



sell diamonds