It’s not often I take time to play with a graphic design– I’m not a graphic designer by trade… I’ve taught a few Adobe PhotoShop workshops and love dabbling with PhotoShop, but I’m certainly not an expert or “artiste” when it comes to making graphics. The banner image of my blog is an important element of my online personality, however, and part of what people likely use to form more surface or initial impressions about who I am and what this blog space is all about. So, I spent a couple of hours updating my “new” WordPress blog header image to fit my revised theme this evening. I archived the old version to Flickr:

My WordPress blog header image, from July 2005 to July 2007

For the new version, because of the constraints of the image I am replacing in the WordPress theme I’ve modified, I only had 109 pixels of vertical height to work with compared to the original 200. I wanted to keep the original image and image collage elements, but I needed to squeeze them together a bit as well as extend the image out– since my new WordPress theme does not use a fixed-width page but rather expands to whatever browser width a person is using.

The original base image for my blog header graphic is a picture taken in Sunlight Basin near Yellowstone Park probably in the summer of 1999, which I have linked from a “Just for Fun!” page I created years ago. (It’s at the bottom of the page.) That page is still online on my main personal website, but to get to it I had to link to the July 2005 version of my homepage (and click the Multimedia – Just For Fun links) linked from my current “Content” page. I like using that image (which is of me fly fishing in the Clark’s Fork River of the Yellowstone) because it represents the calm tranquility and patience with which I want to daily face the stresses and storms of life. (Our family had a reunion near this same area last summer, and I posted a Flickr set of images from that trip you can check out if you want.)

To make the adjustment to fewer height pixels, I split the title “Moving at the Speed of Creativity” and adjusted the size of the text fonts to be smaller so they wouldn’t cover me up in the picture. I also wanted to extend the image out to the right, since my WordPress theme uses it as a background and repeats it if a user’s browser window is set wider than the image. After making five different versions with more variations in each one, I settled on a pixel width of 1500 and several silhouette images I thought “fit” my blog and podcast well. If you look at the full image or have your browser window set to the full 1500 pixel width, you’ll be able to see the second silhouette of a person working on a laptop, but with a podcasting microphone as well. 🙂 As a final touch, rather than just have the fishing image (set with an opacity of 40%, btw) end abruptly before the silhouette images begin, I added a layer mask and used the gradient tool to make the image gradually fade to white. That also let the X-Wing (which is supposed to be traveling through hyperspace at an extreme rate of speed) sort of fly out of the image, and also let the subtitle “The Weblog of Wesley Fryer” sit on the edge of the image. Overall I’m very pleased with the result!

My new blog header image for "Moving at the Speed of Creativity"

With this new blog banner image now in place, I declare my transition to WordPress 2.0 and a new WordPress theme complete! I’m sure I’ll continue to tweak some of the widgets in the sidebars, but I don’t plan on making any other major graphical design changes for awhile! Mark Ahlness did let me know he’d had some problems using a comment form with my new blog and the Internet Explorer browser on Windows, so I’ll have to check that out and make some adjustments if necessary– but other than that I am not planning any more tweaks to the blog design in the near term!

One final note– the toughest part of all this was figuring out how to change my blog theme’s cascading style sheet (CSS) so it would not display the name of my blog over the header image, as it did previously. Thanks to Google and WordPress forums, I found the necessary code and was able to figure out where to put it on my CSS file. I do not consider myself a “programmer” or “coder,” but knowing a little code and being able to tinker/tweak code certainly comes in handy sometimes! This perception belies my contention that we need to help more students learn the basics of programming. Letting students use, learn, and PLAY with free programs like Scratch or StarLogo TNG should be COMMON rather than rare in our schools. MicroWorlds EX (for programming lego robotics in a non-iconic language) is another programming language favored by educational experts far more knowledgeable about this sort of thing than I. If you’re interested in learning more about this, check out Gary Stager’s Logo Programming Resources. I hope to learn more about logo and lego robotics in the coming school year. I want my own kids as well as other learners I work with to be able to write and tweak code, at least in limited doses, for similar positive effects to what I’ve done with my blog! 🙂

Technorati Tags:
, , , , , , , ,

If you enjoyed this post and found it useful, subscribe to Wes' free newsletter. Check out Wes' video tutorial library, "Playing with Media." Information about more ways to learn with Dr. Wesley Fryer are available on wesfryer.com/after.

On this day..

Share →

4 Responses to Graphic design fun

  1. Derek says:

    Hey Wes! The new headers looks great! The whole blog looks fantastic…Good work!

    And yes, be sure to check out Stager’s Logo Programming Resources. As a student at Pepperdine Graduate School of Education & Psychology I had the honor of taking two classes from Gary. He’s brilliant. And Lego/Logo is a fantstic tool….a great way for students to learn about collaboration, technology and robotics.

    Cheers!

    db

  2. Paul says:

    Wes,

    I saw the transitional header over the weekend and kinda missed the X-wing. Nice to see it back. The entire layout of the new site is great. Very accessible and easy to access all the content you are producing.

    Thanks and keep up the great work.

  3. The issue I have is screen resolution. I’ve changed my blog from a 800 wide to 1024 which means about 5% of my readers will now have to side scroll but I can fit more content in.

    I like the full screen fluid design best but the issue becomes the header. On my screen because I have a larger resolution your header begins to repeat just before the third column. One suggestion might be to create either solid white at both ends and center the header or have a gradient at each end as well.

  4. Gary Stager says:

    Just a note…

    WordPress and the variants on HTML are not programming languages, they are markup languages (hence the ML). They are single function sets of commands for performing a specific task, like laying out a blog.

    Programming languages, like MicroWorlds EX, (or Squeak or Java or C++) are designed to allow the user to create a much wider variety of artifacts.

    What separates a language like MicroWorlds EX (Logo-based) from other languages is the deliberate design choices embodied in MicroWorlds that creates what Piaget called, “objects to think with.” You can not only make things in MicroWorlds explicitly, but along the way you are likely to learn more powerful ideas as well.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Sharing from Matthews, North Carolina! Connect with Wes on Mastodon.