Archive | Design RSS feed for this section

New Web Site Published

Today was a big day of sorts. I completed design and development work on new website. It is a custom designed website in form and function. It’s a significantly modified version of Thesis [ #thesiswp ] running on the latest install of WordPress (presently 2.9.1).

The site is http://www.ckwrites.com

I learned a great deal more about Thesis and what’s possible. New tools and techniques that I plan to share with the #thesiswp community in the coming months. I already have at least 4 new tutorials coming; from the simple to the complex.

I’m very happy with the results of my work with Christopher Korody, a.k.a. ‘ck’ of http://www.ckwrites.com. I’m sure he would agree that it was a tough slog but well worth the results. In fact you could just ask him.

Continue Reading

Information Graphic Brilliance

I was sent this information graphic today and was struck by how effective it is. There is something that resonates with me.

It puts your brand at the center of the page and graphically shows you how everything encircles and supports said brand. The guys at the site provided this fantastic embeddable graphic below for you interactive pleasure and I just had to share.

Continue Reading

Tags: , , ,

A Website Realignment: Day 45: Branding Berchman

Note: Recently someone asked to see all the posts from this series. They were reading the “Day X” as a series that was a post every day. Under that logic you would see there are many posts “missing” in this series. However, that is not the case. I am working on this project most days, between client work, and posting when I can. I have not posted in a while because work has picked up a bit. However, I have no plans of abandoning this effort. Stay tuned!

Making the Brand Visual

Now its time for the visual branding. This subjective exercise adds an element of challenge because whenever designers design for themselves it has the possibility of spiraling into a never ending reevaluation.

However, I have been thinking about the visual approach since I started this project. Paying attention to influences, likes, dislikes, colors, and typography for weeks now has allowed me to mentally prepare an ‘idea board’ in my mind.

Continue Reading →

Continue Reading

Tags: , , , ,

A Website Realignment: Day 9: Branding Berchman

I’m picking up where I left off on the previous post.  So far I’ve gathered adjectives 17 friends, family, and clients perceive as my personal brand. I’ve also identified adjectives I would use for my personal brand.  But what else is there that might have an influence on my personal brand?

  • My opinions, likes, and dislikes
  • What tools am I working with?
  • Who do I do business with?
  • Who is my target market?
  • What are my roots, my upbringing, where I was raised, etc.
  • What is my story?

Continue Reading →

Continue Reading

Tags: , , , , , , ,

Working on Spec (aka Working for FREE!)

I had a client of mine—one of my first when I struck out on my own—email me about a conversation we had a while back. The conversation was about some new ideas regarding a website. It was a great talk and the brainstorming was fun. We left the conversation open-ended and, from my perspective, we would pick it up again. That day just came.

Updated 8/14/2009 Continue Reading →

Continue Reading

Tags: , , ,

Three Thesis Sites in One Week

thesis-WordPress

It has been a busy publishing week for me. I have had 3 websites go “live” this week that are based on WordPress and Thesis. Two of these website involved comprehensive design and the other involved functionality customizations. The point of this post is to share some recent work to show that all Thesis sites do not look totally the same. The best part is that I learned many new things about WordPress and Thesis in the process—some of which I will share soon.

Coming up next after this post will be a serious undertaking that I will chronicle on this website—the redesign of berchman.com on WordPress and Thesis. I will post the whole process from start to finish as a complete “under-the-hood” look at how it all gets done. So stay tuned. The posts on the redesign of berchman.com will start next week. Continue Reading →

Continue Reading

Tags: , , , , , , ,

Thesis Tutorial: Dynamic Image Header with Transparent Logo

thesis-binary

One of the tools that I use is Chris Pearson’s fantastic Thesis WordPress theme framework.

In an effort to contribute back to both the Thesis and WordPress communities I have documented how to embed the Next-Gen Gallery plugin to your header, or banner image and place your logo above it. This functionality allows you the ability to have your banner image change how you like it beneath your logo at the top of your website.

Why Would You Want To Do This?

If you would like a variety of images in your header beneath the logo/type and manage them in a central location. Once the initial programming and configuration are setup it’s all image management after that.

You may have clients that would like the option of changing their header image on their own and this gives them that option.

Things you will need to perform this tutorial:

  • WordPress
  • Thesis (optional. You can do this without Thesis but we are using it here)
  • Next-Gen Gallery plugin for WordPress
  • Photoshop (or other image editing software)

First Things First

You will need to have WordPress, Thesis, and Next-Gen Gallery (NGG) installed before proceeding.

Dimensions

Once everything is installed we are ready to go. First you will want to determine the size of your image, or header. What is that dimension in pixels? You will need this for both creating the image and for settings inside of Next-Gen.

Once you have the width and height of your header determined it is time to create/optimize your images that you intend on using. For our purposes of this tutorial the size of our image/header is 857 pixels wide, and 150 pixels high.

Preparing The Images

We used Photoshop to create a layered file containing all of our images so that we can position and scale them within the size constraints and save out the multiple versions of the file. You may want to import your logo, or typeset your text now, to position it on top of all the images so that you can determine the static position that the logo/type will present itself.

Once we have all the layers in the proper positioned its time to save out all your files. In our example we created 5 different images to use. We used smart naming conventions to make sure we can tell these images from others just by their names. We titled our images:

  • header-01.jpg
  • header-02.jpg
  • header-03.jpg
  • header-04.jpg
  • header-05.jpg

Now that the images are prepared its time to prepare the logo/type.

Preparing The Logo/Type For “floating” On Top

We should have our logo/typesetting in place from our previous step of getting our images sized and positioned. We need to do the following steps:

  1. Make sure logo/type is in correct position
  2. Ensure that we have a drop shadow created
  3. Turn off all image layers
  4. Check transparency
  5. Trim the logo/type down to size
  6. Save out proper format of file

Make sure logo/type is in correct position

You want to make sure with each and every image layer you have saved out that your logo/type is in the position you want it to appear on all images.

Ensure that we have a drop shadow created

Select your logo/type layer then select the layer/layer style/drop shadow inside the menu options of Photoshop.

drop_shadow_menu

Adjust the settings to your liking and you should see a drop shadow from your logo/type on top of the image.

picture-14

Once you are happy with the shadow its time to save out the logo/type image.

Turn off all image layers

You should turn off all image layers so that you only see your logo/type and shadow.

Check Transparency

Once all images are turned off and the only layer turned on is your logo/type you should see transparency behind the image. In Photoshop—you should see the checkerboard pattern—it should look like this:

picture-15

Trim the logo/type down to size

With only the logo/type layer displayed you will want to trim out all the uneccessary image data. In Photoshop you want to select Image/Trim

trim_image

You should now have a much tighter logo/type that still has the shadow present.

Save out proper format of file

You want to select File/Save For Web and Devices

save_image

Once presented with the save dialog window you will want to set the following parameters for your file.

  • Image type: PNG
  • Colors: perceptual
  • Number of colors: (depends on what looks good and how large the image file is. Play with this setting)
  • Dither: diffusion
  • Dither %: 88%
  • Transparency: check box ‘yes’
  • Matte: None
  • Transparency Dither: Diffusion Transparency Dither
  • Amount: 88% (Play with setting to get desired result)
  • All other settings default

Here is what my settings looked like:

picture-4

Once your settings are how you like them, save the file with a distinguishing name.

Save it to the custom image folder inside of Thesis: ~/wp-content/themes/thesis/custom/images/

You can now FTP that image to your webserver.

Now that the background images are created and uploaded into NGG, and your logo/type image is uploaded via FTP its time to get busy with the custom.css, custom-fuctions.php, and NGG settings.

Getting Next-Gen Gallery Settings Dialed In

The method presented below is our “hack” to making this combination of plugins and technology work. If you have an easier/simpler way to do this, please share! We are always open to more efficient approaches—who isnt? 🙂 That being said, here is what we did.

Create A Header Gallery and Upload Images

You want to be logged into the admin area of your website, http://www.[yourwebsite].com/wp-admin/

Once logged in you want to proceed to the gallery management tools near the bottom of the left hand side of the page:

picture-6

You want to select Add Gallery / Images from the menu choices. On the next screen you want to give your new gallery a name, in my case it was appropriately “header.”

picture-8

The next step is to upload the images you previously saved. These are the background images, not the logo/type you saved. If you look at the set of tabs at the top of the screen you will see an Upload Images option. That is what you want to select. You need to click on Choose File and proceed to navigate to all your images and upload each one. Once you have all of the images listed, you should then select the proper gallery from the pulldown menu where it says Choose Gallery in the pulldown menu.

picture-10

Once all your images are listed, your gallery is selected it is time to click Upload Images. This may take a few seconds depending on how large your images are so be patient.

picture-12

Once the upload is complete you will see a confirmation at the top of the screen.

picture-13

Manage The Gallery

Now click on Manage Gallery under the Gallery admin menu on the left side of the page. You should see your gallery listed under the Gallery Overview page. Click on the title to proceed to edit the gallery content. At this point you want to make sure that all the images you uploaded are present. If not, go ahead and add what you need.

Tweak the Settings

Now you want to confirm that the slideshow and the technology needed to run it are in place. You do this under the Gallery/Options menu item.

gallery_options

Of primary concern is the tab titled Slideshow. You need to look at the first option under this tab: Path to the Imagerotator. If the path is not already filled in, click the “search now” button just to the right. This should take care of things. If not, you may need to get JW Image Rotator from Jeroen Wijering. Follow the instructions and return here and click the “search now” button again.

picture-18

Testing The Show

Now that you have uploaded the images and checked the slideshow technology is in place you should test out your slideshow to see if everything is working. This tests the slideshow, and if its working well, gives us some key code that we will need for custom_functions.php

The way we tested the slideshow was to create a test page, insert the slideshow, then preview the page.

I created a page by clicking on Pages/AddNew

pages_addnew

I then give the page the title of Gallery Test in the title bar, then I click and icon in the top row, right. You can see it here in the screen capture.

click_ngg

Once I click that button I get a dialog box that lets me select from the pull-down menu the slideshow I want to insert, and lets me determine how I want to display the images—in this case a slideshow.

ngg_popup

Once you have clicked insert you should see something like this showing up in your content area:

[nggallery id=5 ]

This is the code the NGG plugin uses to insert the slideshow. Now the code is in place I click publish, then I click preview to see the page and if the slideshow is working as I want it to. If its not you need to go back and double check your settings and that you have to get JW Image Rotator from Jeroen Wijering.

Assuming the slideshow test is working as you intended in your web browser, the next step is to look under the hood at the code being generated to display the slideshow. You will need to find this code, copy it, and then paste it into custom_functions.php to help build your new header. Fortunately I will show you my code here and you can copy/paste to make things work.

When you are looking at the webpage with the slideshow working as it should, you should “view the source code” to see the syntax that is making everything tick. One thing you may have noticed is that your slideshow is a different size than the header you want. Don’t worry, we will change the size in the code.

What Is The Code?

The code you are looking for in the preview page source is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.YOUR_DOMAIN.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

Get your width and height

There are a few numbers you will want to change based on your design and your domain name. The first line of the code above is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">

You want to replace the width and height with the values of your banner graphics. You should know this from creating the graphics previously. There are 2 other places in the code above where you need to replace the width and height. One place is inside the flashvars declaration:

flashvars : {
	file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
	linkfromdisplay : "true",
	shownavigation : "false",
	showicons : "false",
	rotatetime : "6",
	transition : "fade",
	backcolor : "0x000000",
	frontcolor : "0xFFFFFF",
	lightcolor : "0xCC0000",
	width : "857",
	height : "200"},

The last place is in starting the function here:

swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );

NOTE: Be sure to change the domain to your domain name in the paths above.

So all together the code inside your custom_functions.php will look like this. We are first moving the main navigation below the header (this is optional for you) then inserting the banner:

/* MOVING NAV BELOW HEADER */

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

/* Next-Gen Gallery into Header */

remove_action('thesis_hook_header', 'thesis_default_header');
function ngg_custom_header () { ?>

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.ojaigetaway.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.ojaigetaway.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.ojaigetaway.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

<?php }

add_action('thesis_hook_header', 'ngg_custom_header');

CSS and Your Logo

Now that you have the rendering of your banner in place, the thing to do now is get your logo to appear on top and in the position you would like. The code we added to our custom.css file is this:

div#logotype {
	background-color: transparent;
	margin: 0;
	padding: 0;
	display: inline;
	z-index: 2;
	position: relative;
	top: -84px;
}

The key here is to position: relative; and to use negative top margin. This is what will get your logotype to appear on-top of the banner. Be sure to add the z-index in for good measure.

Be sure to save your custom_functions.php and custom.css file and upload via FTP and test, test test!

Wrap Up

This has been one looonnnnggg tutorial and if you have read to this point, you are both patient and persistent. You can see the banner that I have based this tutorial off of here at OjaiGetaway.com which is a web site in progress.

Do let me know if you have any questions about this process. I will help as best we can.

Continue Reading

Tags: , , , ,

Noticing Things That Are Broken

I came across this video yesterday. It is a presentation given by Seth Godin at the Gel Conference in 2006. He gives a slideshow of things poorly designed, the reasons why they are that way, and sometimes tells how to fix them.

Other than being hilarious at moments, the video reminded me about the importance of functionality. When designing anything it is important to give thought, consideration and ample time for reflection of your possible solutions. To truly design things well does take time: Time to see flaws, loopholes, and incorrect assumptions.

If you don’t invest the time, you end up with crap.

Here is the video. Truly worth watching and please share with others.

Continue Reading

Tags: , , ,

The Immersive Ugliness of Our Environments in America is Entropy Made Visible

I cannot claim to have made the title of this blog post but rather James Howard Kunstler can. He did so at the beginning of his talk at the TED conference in 2004 (I love the gems that keep getting found at the TED website).

Oddly enough I came across this video when reading a blog post about web site strategy. The parallel between building of public spaces in the “real” world, and the building of public spaces in the “virtual” world can come to a common understanding that we care about those spaces that are designed well and invite participation.

The video of his talk is worthwhile to watch (and funny in parts too).

Continue Reading

Tags: , , , ,

Drowning in Packaging

Peanuts

The things I buy typically have too much packaging. I am usually aware of this and when dealing with one or two items purchased at the store it is not too big a deal. There is a moment that the thought goes through my head…

“Man, this is WAY too much packaging for just this one small item.”

Sometimes I need sharp scissors or pliers to get something open, and then I return to my life and the goings on.

This past Tuesday on Christmas the above thought kept happening over, and over again. I have 3 small children who are very lucky to have grandparents that like to dote on them by purchasing gifts. Granted the amount of gifts this year were more than needed but what really opened my eyes was the amount of packaging waste each and every gift produced. There was ‘tons’ of plastic and paper used on every gift–this does not even include the wrapping paper to hide the gifts. The best though is all the wire twists (like the ones you use to close your trash bags) I had to unwravel so that my kids could get at the toys. When I was a kid ( I sound like someones grandfather talking about walking barefoot to school uphill both ways ) we never had this much packaging and tethers to opening gifts. Hell this year I actually had to get out a screwdriver to remove screws from the feet of one toy to release it from its packaging.

We did produce a fair amount of refuse. Good thing is that we can recycle most of the plastic and paper that the gifts came in. It makes me shiver to think how much energy and resources went into creating the packaging alone. It can make ones mind go numb to think about the waste they produce either singularly or as a family and then take that across the United States. That is a lot of packaging waste. The fact that within the United States its people are not considered ‘citizens’ but rather ‘consumers’ should make you stop and think about whether you really NEED that new widget, or your WANT that new widget… (OK I will get off the soapbox now).

Overall I wonder, does ones good fortune during the holiday season increase their carbon footprint? If so, how many more credits does one need to buy? Or could it all be a scheme?

Continue Reading

Tags: , , , , ,