The Grid for iOS 7

September 17, 2013

Here is a set of wallpapers, unapologetically designed for iOS 7 ;) Grab them now for your iPhone, iPad and Mac.

The Grid for iOS and Mac
Since iOS 7 doesn’t allow pixel perfect aligned wallpapers (because of the new parallax effect), this new wallpaper is mainly about colors — the subtle grid in the background complements the colors and adds to the elegant look.
Grab ‘em now for Mac, iPhone, and iPad. Enjoy :)

The Shelf Wallpaper for iPhone 5

September 24, 2012

After updating my grid wallpaper for the new display of the iPhone 5, I'm glad to announce that an updated version of the Shelf wallpaper is now also available. However it's not just a larger version of the same old wallpaper… I also included three new flavors: washed out, dark and light. Hope you enjoy.

Download Shelf wallpaper
Btw you can find the original Shelf wallpaper right here.

Grid Wallpaper for iPhone 5

September 22, 2012

Hey guys. I just updated my popular grid wallpaper for your brand new iPhone 5. Make sure you grab it while it's hot :)

Download Grid wallpaper for iPhone 5

Portfolio Update

What a week… just a couple of days ago two new apps, I had the honor to work on, were released: the official TouchArcade app and iTranslate Voice.

TouchArcade

TouchArcade App IconSince the first days of the App Store TouchArcade has been the website for people that are into iOS gaming. Now you can enjoy daily game news and reviews, or hang out with the community directly on your iPhone or iPod touch. I had a great time working on the app… kudos to the guys over at TouchArcade and Flexibits, who did an awesome job.

iTranslate Voice

iTranslate Voice App IconiTranslate has been one of the most popular translation apps since the very first days of the App Store. Now I had the honor to assist the guys from Sonico Mobile to bring it to an entirely new level with iTranslate Voice – Siri-inspired voice to voice translation for more than 30 languages. Simply talk to you iPhone, and immediately hear yourself in another… perfect if you quickly wanna look up words or start a conversation.

Update

Nice… iTranslate Voice just hit #1 in the App Store. Take that Angry Birds :P

Messages Icon

February 25, 2012

A couple of days ago Apple surprisingly announced the next version of Mac OS, called Mountain Lion. Along with the developer preview they also released a first beta of "Messages", which is basically a combination of iChat, iMessage and FaceTime. Awesome… however in my opinion the app icon kinda lacks the usual Apple style. So here is my take on it.

Those of you following me on Dribbble might have already seen the first preview. I really like the proportions of the icon, so I kept my version as close to the original one as possible and just added a subtle 3D feel to it. Grab it while it’s hot :)

Download Messages Replacement Icon

Btw this icon once again proves Apple’s obsession with the golden ratio: the larger bubble is 1.6x larger than the smaller one. A couple of months ago the Australian designer Alan van Roemburg discovered that the iCloud icon is also infused with some mathematical elegance. I love such details.

The Apple Messages icon makes use of the golden ratio

Bartelme Design 2012

February 20, 2012

Good things come to those who wait… they say. After more than five years I finally found the time to update my website. I know it was way overdue. It's not that I lost interest in my website, it's just that I was really busy working on lots of awesome projects.

One of my main goals was to kinda strip down the sections of the site to an absolute minimum. For sure I wanted to keep the journal, cause that’s what this site was and still is about. On the other hand I also wanted focus more on our actual work and design services.

That’s why I completely redesigned the start page to feature some of my recent projects and the clients I work with. And without giving away too much… I will for sure be able to add some new exciting stuff pretty soon ;)

Bartelme Design 2012 Screenshot

And yeah, I know that there are still some technical and design related hiccups, in particular when you look at older posts. In case you stumble upon some severe problem, please let me know! I’ll keep refining and fixing things over the next couple of days to make it as smooth of an experience as possible.

ColorStreak Wallpaper

October 09, 2011

This wallpaper is dedicated to Steve Jobs, one of the most inspiring persons I've ever known. Without him I would not be where I am right now. Thank you! In this spirit: Stay hungry, stay foolish and enjoy this new wallpaper.

Download ColorStreak Wallpaper
As always the wallpaper is available in hires to fit your beloved 27” displays. Enjoy!

Flow 2 Wallpaper

July 06, 2011

Here is the latest member of the "flow" wallpaper family. Simple. Colorful. Easy on the eyes. Hires, so it looks beautiful on your 27" or 30" displays. Enjoy!

Download Flow 2 Wallpaper

You can either grab the clean Version or the official Bartelme Design version. Enjoy!

Shelf iPhone Wallpaper

Yeah I know, there are already plenty of shelf wallpapers out there… and most of them are really good. However I'm kinda peculiar when it comes to wallpapers and exclusively use my own ones :) I liked how it turned out and thought you may enjoy it as well. So here you go…

Download shelf wallpaper set for iPhone

The set contains two variants: a saturated and a muted one. Each of which is of course optimized for the iPhone 4’s Retina Display. Download Shelf Wallpaper Set

Update

You can find an updated version for the iPhone 5 right here.

Twitter Replacement Icon

January 20, 2011

I wasn't really happy with the app icon of the latest Twitter app for Mac… so I decided to do a quick a replacement icon. It's available in dark gray and blue. Hope you enjoy.

Download Twitter replacement icon

Concept wise I didn’t really want to reinvent the wheel, rather to spice up the already existing one. In order to replace the icon, just locate the Twitter app in you “Applications” folder. From the context menu choose “Show package contents” and replace the existing icons in “Contents/Resources”. Restart the app and you should be good to go.
Download Replacement Icons

Bokeh Wallpaper Devkit

November 06, 2010

Now with the cold time of the year approaching, I thought I needed something to cheer me up. And what's better than creating something you would basically look at at least a bunch of hours a day. So say hello to the "Bokeh" Wallpaper Devkit.

Those of you following me on flickr might already know that I’m a huge fan of photos with a very shallow depth of field. In my opinion those smooth, almost gradient like areas are really relaxing and visually pleasing… actually perfect for a wallpaper.

Download Bokeh Wallpaper

Once again I set this up as a Devkit, so you can put in your own logo. Feel free not only to download the official wallpaper, but also to grab the PSD and create your own piece of art. Btw the wallpapers are of course ready for your 27” displays and the package even includes some variants for your iPad as a bonus. Have fun :)

Romanian translation

The Grid iPhone Wallpaper

June 25, 2010

Now with everybody posting grid style wallpapers for the newly released iOS 4, I thought I should do some official Bartelme Design grid wallpapers :) The wallpapers come in a couple of different colors and are of course ready for the retina display. Go grab 'em!

Download the Grid Wallpaper for iOS 4

Update

All wallpapers have been updated for the new gorgeous screen of the iPhone 5!

HDR Tutorial

December 13, 2009

Those of you who follow me on Twitter or Flickr, might have noticed that I recently started posting more and more HDR photos. In case you haven't heard of HDR (high dynamic range) before: it's a technique to enhance the dynamic range of a photo, which results in more details in both dark and light areas.

To start with I’d like to point out that you can achieve HDR like effects with just a single photo. The perfect tool to achieve this kinda effect is Topaz Adjust ($49.99). It gives you full control over exposure details and color and really makes your images pop. I will post a follow up tutorial on how to get the most out of Topaz Adjust. However in this tutorial we will focus on how to create real HDR photos based on three differently exposed photos.

HDR Basics

As mentioned most HDR photos are more or less a composition of three photos, each of which taken at different exposures (usually -2 stops, normal, +2 stops): the underexposed image provides details in the lights areas, the overexposed one details in the dark areas and the correctly exposed variant is responsible for the details in the mid tones. In our case I took some photos of a church in my hometown Graz. Churches are a really nice example of how to bring the most out of HDR photography, since normally there will be bright light coming in from the windows as well as lots of darker corners. It’s simply impossible to capture all of the nice details with just one shot. At least with cameras available today. Anyway… here is the footage we gonna use for this tutorial.

The base images with three different exposures

Taking photos

Btw I’d like to point out that you really don’t have to use any of the top camera models to achieve a good HDR photo. Actually any camera that allows manual over- or under-exposure of photos can be used to create HDR images. If you own a DSLR you might be familiar with your bracketing or even auto bracketing feature of your camera. That’s exactly the feature you should use to take the three photos. There is just one thing you should keep in mind: we gonna combine the three photos in a next step and thus it’s really important that they are congruent. Sure there are bunch of different tools to make your photos match (like Photoshop’s auto align feature), but to make sure your footage is as good as possible I really recommend using a steady tripod and maybe even a remote release to reduce camera shake as much as possible. Personally I use a simple Manfrotto tripod and a Nikon remote release.

Software

Photomatix application iconEven though there are certain techniques to create HDR photos in Photoshop, most people I know (me included) prefer another tool: Photomatix by HDRsoft. Photomatix comes as a standalone version or as a plugin for both Apple Aperture and Adobe Lightroom and is priced between $39 and $119. They even offer a reduced pricing for students, teachers, charities etc. And in case you wanna save another 15%, be sure to use the Photomatix coupon code “BARTELME”. So check it out.

Processing

Photomatix export dialogIn a next step we have to bring the three different images to Photomatix. For that purpose you can either simply open the images in Photomatix or send them to Photomatix directly from within Aperture or Lightroom. In Lightroom just select the three photos, right click and choose “export - Photomatix” in the context menu. This will bring up a dialog with a couple of different options. Make sure you select “Generate HDR image”, “reduce chromatic aberrations” and “reduce noise”.

The last setting is really important, since generating a HDR photo will always produce some noise. Alternatively you can leave this particular checkbox unchecked and remove the noise in later step using a dedicated noise reduction tool, such as Noiseware Professional. Also if you didn’t use a tripod, make sure to check “align images”… actually I keep this one checked all the time, although I always use a tripod. The last checkbox is also kinda nice: this will make Photomatix automatically send the processed photo back to Lightroom and stack it with the three original images. I use this all the time.

Once you click “Export” Photomatix launches and starts processing the images. This may take while, depending on the resolution of your images and the processing power of your computer. After that Photomatix will open a window with a first version of your HDR photo. Although it might look interesting, it’s not the final version yet.

Photo processed with Photomatix

In a next step we have to tone map the photo to reveal the image details in highlights and shadows. After hitting “Tone Mapping” a new palette pops up with a bunch of different options and sliders. Also note that appearance of your photo has changed… in most cases it will look even worse than the previous version. Don’t worry, it will get much better in the next step.

Photo processed with Photomatix

Tone Mapping

Photomatix tonemapping panel Now let’s fine tune the image. The strength slider controls the strength of the contrast enhancement. I prefer to move it all the way to the right. The saturation slider… well increases the overall saturation of the image. Personally I really like vivid images, however you can easily overdo the effect. So play around until you get the effect you’re after. The luminosity control is where it starts to get interesting: Moving the slider to the left will result in a more natural look, moving it to the right brightens the image and gives it a somewhat painterly look.

The microcontrast slider sets how much local details are amplified. A higher value gives a sharper, a lower one a softer look. The “Smoothing” setting has an important influence on the look of the tone mapped image. High values give a more “natural” look, low values a more “artificial” look. I kinda prefer the natural over the artificial look… but as mentioned before, this mainly depends on your photo and of course on your personal taste and style.And finally you can define the contrast of your image by adjusting the white and black point as well as the gamma. The more you move the black/white sliders to the right, the higher the contrast of the image will be. The “Gamma” slider adjusts the mid-tone of the tone mapped image, brightening or darkening the image globally.

In the “color settings” section you can fine tune the temperature and saturation of your image and the “miscellaneous” section enables you to even more fine tune how certain parts of the image should be smoothed out. To be honest I rarely use these settings, but feel free to play around. Each photo is different. When you’re done press the “Save and reimport” button on the bottom of the panel to send the processed image back to Lightroom. Here is the final result.

Photo processed with Photomatix

So I hope I could give you a nice introduction to the interesting field of HDR photography. Feel free to play around and post your results to my HDR flickr group. Looking forward to your photos!

Join Viva HDR on Flickr

And by the way, you may also wanna check out the Belorussian version.

 

Sunset Wallpaper

I'm glad to announce another wallpaper I've been working on for quite some time. Now I think it's ready to be released. Enjoy "Sunset", an abstract wallpaper full of atmosphere :)

Download the Sunset wallpaper

Once again the wallpaper is available in 2560x1600px, so it should even look great on your 30” displays. Download and enjoy!

Devkit: Happy Easter

April 11, 2009

It's Easter and time for a new Devkit. Download it now, customize it and send it to your beloved ones. Enjoy and Happy Easter! Wolfgang :)

The Devkit is once again available as Photoshop file. In case you just wanna send my variant you can also download it as simple JPEG. Enjoy!

Happy Easter from Bartelme Design

Colorsplash Wallpaper

February 15, 2009

Those of you following me on Twitter or Flickr might have already seen a preview of "Colorsplash". Now it's available as a free download. Happy Valentines Day and enjoy your new wallpaper!

Colorsplash comes in two slightly different variants. Enjoy.

Download Colorsplash Wallpaper Set

Flux iPhone Wallpaper

January 10, 2009

I recently played around in Photoshop and came up with a combination of colors and shapes I really liked. So here is the brand new "Flux" wallpaper set for your iPhone and iPod touch. Enjoy!

The package contains three different flavors of the wallpaper. However feel free to recolor them to your heart’s content.

Download Flux Wallpaper Set for iPhone and iPod touch

Happy New Year

December 31, 2008

Once again the year draws to a close. I hope all of you enjoyed it as much as I did. All the best for 2009 and a wonderful New Year’s Eve! Wolfgang :)

Happy New Year

ColorFlow 2 Wallpaper

December 24, 2008

What's better than celebrating Christmas? Well, celebrating Christmas with a brand new, high resolution wallpaper. So grab "ColorFlow 2" while it's hot. Merry Christmas and enjoy the holidays!

Download ColorFlow 2 Wallpaper Set

ColorFlow 2 comes in 4 slightly different flavors, each of which available in 2560x1600px. Download

CS4 Quicktip: Pathfinder

November 09, 2008

While the Pathfinder functions themselves have not changed inside of Illustrator CS4, what has changed is their default behavior… and this might cause some confusion. In previous versions of Illustrator you could select two shapes and click a Pathfinder button to create a compound shape…

Pathfinder

However if you perform the same steps in Illustrator CS4, you won’t get a compound, but an already expanded shape. In order to create compound shapes, just hold down the option (alt) key and click the respective button in the Pathfinder panel. Voilà…

CS4 Quicktip: Masks

November 03, 2008

One of my favorite new features of Photoshop CS4 is by far the new way of handling masks. Personally I use masks quite frequently, so the newly introduced functionality such as fine tuning and feathering edges is quite a productivity and creativity boost.

Some of you might argue that this feature was already introduced back in CS3. Well yes and no. Of course those features were available in previous versions, but now they are not just more accessible via the new “masks” panel, but their values stay editable. So if you decide to change the amount of feather at a later point, you don’t have to recreate the mask. And it comes even better: This also works for vector masks… perfect for all of us using shapes :)

Photoshop's new mask panel

There is just one minor thing you should know: By default Photoshop saves files in some sort of compatibility mode, so that you can still open the file in older versions of Photoshop. However if you turn on that feature, your mask’s values won’t be editable the next time you open the PSD. So if you wanna use this new feature, make sure you uncheck this option when saving your CS4 file. Enjoy :)

Turn off compatibility mode

Dashball Lite

I'm excited to announce that the free version of Dashball has just been approved by Apple and is now available at the App Store. The free version comes with the same improved accelerometer controls as the recently released Dashball 1.1 update.

Check it out and take the challenge in 5 selected levels. And of course feel free to upgrade to the full version to unlock many more levels. I hope you enjoy :)

Dashball Lite - The Free Smashing Breakout Puzzle Game for iPhone and iPod touch

Dashball - Now Available

Good things come to those who wait. I'm proud to announce that the highly anticipated iPhone game "Dashball" finally made it to the App Store. Grab your copy and be one of the first to enjoy the smashing breakout puzzle fun.

To start with I’d like to thank you for all your feedback and suggestions on Dashball and the recently released Dashball wallpaper set. Also kudos to the many beta testers who did an amazing job. And last but not least thanks to my wife and friends for their patience and support over the last couple of months :)

Dashball - now available at the App Store

The Game

So what is the game about? Well personally I’d define it as action puzzle game where the goal is to destroy all the colored blocks by controlling a bouncing ball. Each of the 25 levels contains three kinds of blocks:

     
  • blocks that can be destroyed
  •  
  • blocks that can be moved
  •  
  • and blocks that change the color of the ball.


There is also a fourth kind of block that you will learn to dread: the red skull block. Avoid this one at all costs! Since you can only smash or move blocks of the same color as the ball, you have to choose wisely in which order you smash, move and change colors.

Dashball - block types
?

You’re in control

Dashball is designed for casual gaming and therefore is easy to control. Just tap the screen on the left or right side to move the ball one step left or right. Tap+hold to move the ball continuously. And for even more challenging game play we’ve also implemented accelerometer support: Just tilt your iPhone left or right to move the ball in the desired direction.

Let’s rock

What’s the point of owning an iPod if you can’t listen to music? Well, Dashball certainly won’t stop you. Just start the music track before you launch the game. Nice huh? But enough talking, let’s get the ball rolling…

Update

Dashball 1.1 is now available. Besides several bug fixes we significantly improved the accelerometer controls. Make sure you grab the new version!

 

Dashball Wallpaper

In just a couple of days Dashball will hit the App Store. Today you can already download the official wallpaper set: It contains a high resolution wallpaper for your desktop as well as smaller one for your iPhone or iPod touch. Grab ’em while they're hot :)

Download Dashball Wallpaper Set

I thought it might be nice to release the official wallpaper set a couple of days before Dashball - the smashing breakout puzzle game for your iPhone and iPod touch - will be available at the App Store. Enjoy :)

Update

I just added a plain version of the desktop version… without the Dashball logo. In case you’ve already downloaded the package, make sure you grab the new one :)

Long time no hear

Was kinda quiet here over the last couple of months, right? Well that was mainly because I was working on some really interesting projects — mainly iPhone apps — that kept me from publishing new stuff. And there is one more thing…

tap tap tap

Where ToOne of the most exciting projects was - and still is - working with Sophia and John from tap tap tap on their amazing iPhone apps such as Where To?, Tipulator or Groceries. If you haven’t already, make sure you check em out.

Mindmeister

Where ToFurthermore I assisted my friends Michael and Till from Mindmeister with preparing the next big release of their collaborative online mind mapping tool. I’ve seen the preview and I can tell there are some really exciting new features to be announced :)

One more thing

Where ToBut there is one more thing I’d like to talk about: a secret project I’ve been working on over the last couple of months. Hm… it’s actually not a secret anymore, since I’ve already posted some teasers on my flickr stream, right? Well so I guess it’s okay to officially let you know that I’ve been working on a new iPhone game. It’s currently being reviewed by Apple and I’m confident that it will be ready to hit the App Store sometime next week. So stay tuned…

Update

Make sure you also check out the official Dashball wallpaper set.

Colorflow Wallpaper

I think it's time for some new colors... time to spice up your desktop. So I'm glad to announce "Colorflow": 14 simple, non-distracting desktops playing with color and different shading. I hope you enjoy.

Download Colorflow Wallpaper Set

And just in case you can’t decide which variant to choose, you might consider changing the image every 5 minutes or so. In Mac OS you just have to check the “Change picture every…” checkbox in the “Desktop & Screensaver” preference pane to make them fade into each other every x minutes (looks awesome). I’m convinced there are similiar ways to achieve this effect in any other operating system. So in this sense… enjoy :)

Valentine’s Day Devkit

February 14, 2008

Just in case you haven't noticed yet - tomorrow is Valentine's Day. So don't forget to get some flowers, a cute present or a nicely designed Valentines Card for your sweetheart… So make sure you grab the Valentine Devkit and get started.

Have fun and Happy Valentine’s day to all of you. Download Devkit

Happy Valentines Day

Design Theft

January 27, 2008

I think I'm kinda fair when it comes to borrowing minor or even major parts of my design work. I even published my previous designs as free themes for WordPress and ExpressionEngine - not to mention the Photoshop devkits - to provide people with a nice looking site or to assist them in learning Photoshop or Illustrator...

I can also accept the fact that people rip certain designs in order to “learn CSS”. Oh yeah, I’ve heard that dozens of times — what a lame excuse. If you just wanna learn CSS, set up a local web server and feel free to experiment. There is no reason to “learn” publicly.

But this time a guy, named %name removed%, has gone too far. He did not just rip my current design, he also created a WordPress theme, that can now be downloaded from his site. Want some more? He wrote me half a year ago and asked if he could release the theme. I explicitly told him that he should wait until I come up with another theme for my site. Well, apparently he is not that patient or just barefaced.

My site is a major part of my business and ripping and releasing it as a free theme definitely has negative impact on my reputation. Sorry for my rude words, but I’m really upset and disappointed.

Update

I just received a mail from Diego - he’ll take down the download until I come up with a new design. Thanks.

Happy New Year

December 31, 2007

Wow, what an eventful and interesting year 2007. I hope all of you enjoyed it as much as I did. All the best for 2008 and a wonderful New Year's Eve! Wolfgang :)

Happy New Year from Bartelme Design

Btw if you wanna design your own greeting card, you can download the Happy New Year Devkit. Have fun and feel free to post links to your variants :)

Flow Wallpaper

It's time for some fresh, dynamic colors for your desktop. So check out my brand new wallpaper "Flow", inspired by the default PS3 background as well as by the icons of Adobe's Creative Suite: To be precise, by the icons of Photoshop, Indesign and Illustrator.

Resolutions

“Flow” comes in two variants: a single display one with a resolution of 2560x1600px and a dual screen one with a resolution of 2x1920x1200px. Hope you enjoy :)

Download Flow Wallpaper

Leopard

By the way those of you, who have already upgraded to Leopard and don’t like the semitransparent menu bar or the new Dock, might particularly be interested in this one: Because of the black background at the very top and bottom you have a more or less opaque looking menu bar and the highest possible contrast for the dock. Thus you can easily spot which apps are currently running and which not.

Update

I just added a bunch of iPhone/iPod touch compatible variants to the package. Enjoy :)

Solid Wood: Wallpaper

Those of you following my Flickr stream might already know that I was working on a new wallpaper set called "Solid Wood". And guess what… once again it's not just a set of wallpapers, but a complete devkit :P

Download Solid Wood Wallpaper Devkit

Customizing

So make sure you download the devkit, customize it and illuminate your desktop. Btw you might argue that the menu bar of Mac OS covers parts of the lights… well that was actually the intention ;)

So if you resize the wallpaper in Photoshop, make sure that you use “canvas size” rather than “image size”. Otherwise the lights would also be resized and thus may be covered completely by the menu bar… which won’t look that good.

Canvas size Settings in Photoshop

Official BD Wallpaper

Btw if you’re just interested in the official Bartelme Design wallpaper, you may download it right here. Enjoy.

Button Devkit

October 06, 2007

Hey everybody — sorry for not posting that much over the last quarter. I was busy moving to my new apartment and working on some really nice projects that will be revealed pretty soon. Anyway I thought you guys deserve something special for your patience — so here is the brand new, eagerly awaited button devkit :)

For those of you who don’t know my previous devkits — it’s basically a Photoshop file ready to use, adapt and reinterpret. Feel free to play around and post your outcomes on flickr or any other image sharing service. Btw as for popular request: Feel free to use those buttons, even on commercial websites etc. Have fun!

Download the Button Devkit

Smiley Devkit

Obviously I really got addicted to this whole devkit thing :) So here is another one: this time it's all about creating smilies. Feel free to download the Photoshop file and get creative...

By the way it would be nice to see what you guys did with the devkit. If you wanna show off your artwork, join the Smiley Flickr Group and post your smilies. Im curious…

Download the Smiley Devkit

Flag Button Devkit

In many cases you have to provide different options or features for different nationalities. I guess the most popular example is Apple's iTunes Store, where you click a small flag button to access the store of your country. Here is a development kit to create such buttons.

How to…

Once again it’s bascially a Photoshop file with placeholders. To create a new button, just duplicate a layer group and paste the new flag into the respective layer. It’s as simple as that. Enjoy.

Download the Flag Button Development Kit

Get involved

By the way I thought it would be nice if we could create a complete set of flags so that people can simply download a ZIP and reuse the buttons on their websites. So if you create new buttons just let me know and I’ll add them to the Devkit.

Update

Alright guys - just added an Illustrator file to the ZIP. So just in case you’ve already downloaded it, make sure that you grab the most recent version.

Update 2

First of all thanks to Cezary for pointing out that I did not use the correct colors for the flags. I changed that. And secondly I created a ZIP including all the flags I received so far. Btw if you plan to do further flags I’d kindly ask you to send it as transparent PNG (216x216px) and I will add it to the ZIP. Thanks for participating!

Update 3

Thanks to Matthias Slovig who just contributed a complete European set to the collection. Amazing!

Tutorial: Rays of Light

After releasing my latest wallpaper devkit I received a bunch of requests from people, asking me to do a tutorial on how to create rays of light with Adobe Photoshop. Well here we go...

Draw gradient

In a first step open Photoshop and create a new document. If you intend to create a wallpaper you may already choose the respective dimensions. Fill the background layer with a subtle gradient like on the screenshot below.

Draw a subtle gradient

Select gradient type

Now create a new layer and select the gradient tool from the tools palette. The context sensitive options palette now displays gradient specific settings. Click the gradient in order to open the gradient editor. Now select *Noise* as gradient type and click the “Randomize” button to get a balanced gradient (hue is not important). Make sure that it looks similar to the one shown in the screenshot below.

Select Gradient Type: Noise

Draw angle gradient

Now we can draw a gradient on our newly created layer. Make sure that you’ve selected *Angle Gradient* in the options palette and draw a gradient that looks similar to the one below.

Draw an angle gradient

Desaturate

Now we just need to desaturate the layer via “Image - Adjustments - Desaturate” and set its blending mode either to *Soft Light* or *Overlay*. Voila - we are finished. Quite easy huh? :)

Desaturate and set the blending mode to 'Soft Light'

Deep Blue Wallpaper

Due to popular request I did a wallpaper using the bubbles appearing on the start page and in the comment section on this site. But instead of just publishing the wallpaper, I thought it would be nice to once again turn it into a wallpaper devkit so you can customize it.

So feel free to play around, reposition the bubbles, remove the gras or add new items to the wallpaper. Would be nice if you shared your artwork with us. And by the way, this devkit also supports dual screen setups - for those of you using two displays or a giant 30” Apple Cinema Display.

Download the Deep Blue Wallpaper Devkit

So don’t be surprised that the package is about 35MB in size :) If you’re interested in the offical Bartelme Design Deep Blue Wallpaper you can grab your copy right here. Enjoy.

WP Dark Customization Kit

After releasing the "Dark Theme" for Wordpress I've been asked several times how to incorporate a custom logo into the header. So I decided to to release a small customization kit, which includes a PSD file and a short description of how to change the CSS accordingly.

Creating the Logo

In a first step make sure that you have’ve installed the latest version of the theme. Then download the Customization Kit and open the included Photoshop file. I’ve already set up some guides so that you get an idea of where to place your logo. After placing your logo select it by using the “rectangular marquee tool”, copy it to a new file (copy merged) and save it in your theme’s “images” folder. Personally I prefer to name it “logo”, but anything else works fine :)

Download WP Dark Customization Kit

CSS modifications

Now it’s time to modify the CSS in order to display the just created logo in the header area of your site. So open “style.css”, locate the “header” section and add the following rule:

#header h1 a {
  background: transparent url(images/logo.gif) no-repeat 0 0;
  display: block;
  height: 60px;
  line-height: 1000px;
  overflow: hidden;
  width: 360px;
}

and change the “top” property’s value in the following rule to 75px:

#header h1,
#header img.logo {
  position: absolute;
  left: 40px;
  top: 75px;
  border: none;
}

By the way these two rule assume that your image is 360x60px in size. If your image is larger or smaller make sure that you modify the width, height and top properties accordingly. And that’s it. Refresh your browser and enjoy.

 

Dark Theme for Wordpress

I'm proud to announce that the previous theme of "Bartelme Design" - also known as "The Dark Theme" - is now available as free Wordpress template. I want to thank ilemoned who did the whole coding work - great job man!

It’s getting dark

The so called “Dark Theme” was originally used on this site over the last 6 months or so. I thought it would be nice to share it with you guys, now that I have switched to my new “Deep Blue” theme :) Feel free to download the package and bring some darkness to your WordPress driven weblog. By the way as far as I know there will also be Drupal versions of the “Dark” as well as of the “Fresh” theme. So stay tuned.

Download the Dark theme for Wordpress

Details

According to ilemoned the theme has been tested on *WordPress 2.1.3* with Firefox and Safari, as well as IE6/7 and supports the following plugins:

* flickrRSS
* Gravatar
* Ultimate Tag Warrior
* WP-PageNavi

Make sure that you also check out the WP Dark customization kit to customize the header.

 

Wallpaper Devkit 3

Those of you following my Twitter stream already know that I recently did a wallpaper for Hyperwave. Now I thought it would be nice to release it as another "wallpaper devkit". So grab it while it's hot.

The devkit once again contains a Photoshop template with a placeholder for your company’s logo or tagline or anything else that keeps you motivated. So download, customize, enjoy and probably share your artwork with others by posting it to Flickr or your weblog. Happy customizing.

Download the thrid incarnation of Bartelme's Wallpaper Development Kit

By the way those of you interested in the offical Bartelme Design wallpaper: grab your copy here.

What’s cooking

I'm excited to present you guys what I've been working on over the last couple of months. I guess most of you still know the My Dream App competition - an experiment to see what happens when you combine the expertise of some of the best talents in the software and tech world with great ideas and feedback from everyone else...

...and guess what? The experiment succeeded - at least from my point of view. In the end they ended up with three thrilling ideas for applications. One of them was *Cookbook*, which is all about managing and sharing your favorite recipes.

Cookbook

Michael Yuan already did an amazing job in creating the first mockups for the app - however we (Austin Sarner - godfather of AppZapper and Disco, John Casasanta - mastermind behind iClip) wanted to go a step further. We wanted to create something really Mac like, yet individual looking thing. So to make a long story short - here is a screenshot of the latest mockup.

Cookbook

Previous Iterations

Of course this is not gonna be the final look and feel - we still need to put a lot of effort into creating themes for the different cuisines. But as for the main UI, I think we’re almost there. Austin also posted a bunch of screenshots of previous iterations on his Flickr stream. So check it out and don’t hesitate to throw in your two cents worth - this would be a tremendous help for us. Thanks!

Twittero ergo sum

Yesterday I initially wanted to spent some time on Adobe's website, browsing the newly updated product pages and trying to figure out which Creative Suite bundle I will upgrade to. But then I stumbled upon the latest public beta of Twitterrific and so I finally created a Twitter account.

So why would anyone join Twitter? What’s so special about sharing loads of useless bits and pieces? Why would someone be interested in the fact that I’m currently peeling an apple, installing application XY or feeding my cat? Why would I want to expose my private life to the public?

Twitterrific Icon

Why blog?

Sounds familiar? Didn’t people say the same about blogs two years ago? Well they definitely did: “Online diaries, what an absurd idea. Who would be interested in that?”. And what did happen? Blogs revolutionized the web. And why? Well because it’s in the way that you use it.

And I guess same is true for Twitter: I see the whole thing as some kind of mini instant blogging: posting thoughts, ideas and impressions I would probably also discuss with friends or colleagues. Or am I wrong? Why do you use or avoid Twitter?

Update: Sorry, I forgot to mention my Twitter address: http://twitter.com/bartelme

Realign/Redesign

It was quiet here over the last couple of weeks, right? On the one hand that was because I spent most of the time working on client projects - info on that will be revealed soon. On the other hand I also worked on a new version of Bartelme Design.

The previous design

The last design was quite a success and I also liked it. However over the time I got tired looking at it. Additionally it was a bit overloaded and didn’t work well on smaller screens. And last but not least the different sections were hard to distinguish from each other - you know you couldn’t tell whether you were in the showroom or the journal section, without consulting the navigation. To tell the truth that’s not too bad, but I wanted to do better.

Bartelme Redesign

The new design

So the new version is actually not just a redesign of the old site, but a real realignment. The color scheme is quite similar to the old one to convey the typical “Bartelme” touch. However all other parts are quite distinct - not only from the old version but also from each other. I tried to regroup certain areas, emphasize more important areas and get rid of dead wood.

Well and that’s the result. Your feedback is much appreciated. Hope you enjoy :)

 

Ruby on Rails Starterkit

February 18, 2007

Recently I got in touch with Ruby on Rails. It took a while to get everything work, so I thought it would be a nice idea to share my experiences with you guys. To make it clear: This ain't gonna be a Ruby on Rails tutorial - I'm still a newbie in this field - it's just a collection of links and experiences that may be of help, when making your first steps with Ruby on Rails.

Installation

First of all you have to set up your environment. Basically you will need a Ruby interpreter, the Rails framework, some additional libraries and a database - most likely this will be MySQL or PostgreSQL. If you are on Windows you may have a look at Instant Rails, an open source tool that will install Ruby, Rails, Apache, and MySQL - all pre-configured and ready to run.

If you’re on a Mac and you don’t wanna use the Terminal, you may download Locomotive, an all-in-one solution, compareable to Instant Rails. Otherwise I would recommend to read Dan Benjamin’s famous article “Building Ruby, Rails, Subversion, Mongrel, and MySQL on Mac OS X”. Just a quick note: make sure that you’ve installed the latest version of XCode, otherwise the installation may fail. Geek note: That’s because older XCode releases use an outdated version of GCC (GNU Compiler Collection).

If you prefer using Linux you may also follow Dan Benjamin’s instructions, mentioned above. Alternatively you may use your distribution’s package manager. Btw just in case you have any additional links, don’t hesitate to post them in the comment section.

Read the Bible

There are a bunch of great Ruby on Rails books out there. However I would recommend reading Agile Web Development with Rails by Dave Thomas and David Heinemeier Hansson. Step by step you will learn the basics of Rails by building a simple shopping cart. Btw make sure that you get the 2nd edition, which has just been published. More experienced Rails followers might be interested in reading Rails Recipes. by Chad Fowler.

Stay informed

And last but not least make sure that you also subscribe to the official
Rails Weblog or to the Ruby on Rails group. Anything else can be found on the official Rails website. So in this spirit - happy coding :)

 

 

Prototype Reference Widget

I was excited when the first documentation of the Prototype JavaScript Framework was released a couple of weeks ago. In order to get quick access to the documentation I created a simple Dashboard widget. And well… I thought it would be nice to share it with you.

On the official Prototype blog Justin Palmer posted some tools that are of great help when coding Prototype based JavaScript applications. Besides the TextMate plugins I particulary liked the idea of using a bookmarklet to quickly search the documentation. Since it’s just a simple JavaScript, I thought it would be nice to create a tiny Dashboard widget out of it.

Prototype Widget

Usage

So what about usage? Well as you might have expected, it’s quite simple: For instance if you are looking for documentation on “Event”, just type “event” - if you want some details on “Event.observe”, just enter “Event.observe”... wow ;) Actually you can also omit the separating dots and just use spaces instead. That’s it. Enjoy.

Update: Version 1.1 is out with tweaked support for Prototype’s $-utilities. For instance you can now search for “$, $$, $a etc.”. A special “thank you” goes out to Andrew Dupont, providing the respective JavaScript code.

 

Leopard Thoughts

January 28, 2007

Bit by bit new screenshots of Apple's upcoming release of Mac OS 10.5 Leopard find their way to the web. Recently I found a couple of nice ones at BabyGotMac, which have unfortunately been removed from the site, due to a DMCA notice served by Apple.

Anyway creative as I am I posted one of them on my Flickr account. At a first glance there is nothing special about this particular screenshot - it’s basically just a simple “open” dialog. However if you look at it in more detail you will notice those three buttons next to the back and forward buttons: music, photos, movies.

Mac OS Leopard Media Bar

Media - tightly integrated

Since I don’t have any Leopard builds, I can just speculate - but from my point of view those buttons provide quick access to all your media on your Mac. Once again: nothing special. But wait… does this mean that you can easily access your iTunes, iPhoto and iMovie library from any application? That would be great. I always appreciated the well thought-out integration of the iLife suite. However it was a pain in the ass to access content from other applications.

A system-wide iLife access would be a great deal. However in order to make this work, iLife must be thightly integrated into the operating system. So if you ask me, I suppose that there won’t be a separately sold iLife 07 suite at all - which may also be the reason why Steve Jobs didn’t lose a single word about iLife at MacWorld. So maybe the most innovative feature of Mac OS 10.5 Leopard - besides the hopefully improved user interface - will be its integrated media related functionality. So what’s your guess? :)

 

JS library advice

January 09, 2007

I know, when it comes to choosing the right JavaScript library for your web project it can get very religious. Anyway what I would like to know from you guys is which JavaScript library you would recommend for building a quite complex enterprise content management system.

In detail: Some of you might know that I work at Hyperwave as UI specialist. Our products are quite sophisticated, technology wise. However the user experience is more Web 1.0 like and therefore needs to be improved: more dynamic, drag and drop, light weight etc. You know, all those funky nice things everybody is currently talking about :)

Which library?

Our current home brewn library is technically mature but lacks the mentioned features. So my approach would be to make use of other libraries such as Prototype, Dojo etc. I’ve already done some research (my current favorite is Prototype) however I’m not quite convinced yet. So could you give my any advice? These are the aspects I’m most interested in:

  • which libraries do you use?
  • why did you choose them?
  • what are the most important aspects of a library when using it for huge web applications?
  • should I use Prototype?
  • why shouldn’t I use Prototype?

Thanks. Your advice is much appreciated.

Merry Christmas

December 24, 2006

Now that the busy advent season is over, it's time to calm down and enjoy some days off. Herewith I wish all of you and your families Merry Christmas and relaxing holidays. Have a nice time.

Merry Christmas from Bartelme Design

Desktop Baton

Another baton is going around these days. I’ve been passed one by Manuela Hoffmann from Surfgarden. This time it's all about your desktop - not the virtual but your physical one. So here we go...

So here is my current working environment. For more details check out the related Flickr posting :) I gonna pass this baton to Scott, Chris and Martin.

My current desktop setup

Microformats Icons

December 05, 2006

I think it's time to inform you about a small project I worked on together with Chris Messina from Factorycity. As Microformats have gained much popularity over the last year we thought it was time to standardize the way they are represented on a website. So we created the Microformats Icon Set.

The starter set contains icons for hCal, hResume, hCard, XFN and a generic TAG icon. All Icons are available here in several formats. If you wanna get started immediately you can grab the PNGs, which will be perfect in most cases. If you need additional icons, you can download the Icon Development Kit containing Photoshop as well as Illustrator templates for all icons. Have fun :)

Primary Microformats Icons

Furthermore we concentraded on special XFN icons, conveiing the relation to the the person linked to.

XFN set

Optimizing Strokes Part2

November 29, 2006

In the first article of this series I described how to optimize strokes in Adobe Illustrator. This time we will focus on how to create smooth strokes using Photoshop's layer styles.

When creating icons or arbitrary artwork in Photoshop it’s definitely adviseable to make use of Photoshop’s layer style functionality. Not just because of the fact that you can easily create multiple differently colored instances of the shape - but also because you can easily apply smooth strokes to your elements. The most obvious method is to use the “Stroke” effect to achieve… well strokes. In most cases that’s the way to go. However if you wanna apply a subtle stroke to a round object you get much smoother results when using a tight outer glow instead. See for yourself. Subtle but noticeable :)

Difference between a normal stroke and outer glow

By the way you may use the following settings as a starting point - I normally create an outer glow with 1px in size and a range of 30 to 40%. However feel free to play around with different settings to suite your graphic.

Setting in Photoshop palette

Still alive

November 28, 2006

Bartelme Design is dead - well obviously not. Even though it might have seemed like that over the last couple of days. My provider upgraded their hardware and changed their IP addresses - so all nameservers had to be updated.

Unfortunately this took a bit longer than orginally intended - with the result that my website as well as my mail server were not available. So just in case you sent me important mails - please do me a favor and send them again. Thanks :) Sorry for any inconveniencies and have a great day, Wolfgang

EE: Display multiple categories

I recently started a project based on ExpressionEngine - however there were two requirements: The first one was to display multiple categories - meaning that I wanted a page to display entries that belong to category x as well as to category y. The second requirement was to change categories dynamically.

Requirement 1

The first requirement - displaying multiple categories - is quite easy to achieve. Remember that we can add a “category” attribute to any {exp:weblog:entries} tag to control which categories should be displayed. Use category=“2” to just display all weblog entries associated with category 2 - use category=“2|4|6” to display entries that are associated with category 2, 4 or 6. You can also exclude category by just placing a “not” in front of the respective id. Simple huh?

Requirement 2

The second requirement is a bit more tricky. Remember, I wanted to dynamically alter the set of categories displayed. In a first step I played with the thought to use the search module - but that didn’t work. It’s easier to dynamically insert the respective values using PHP. I know it’s not recommended to make use of PHP in your templates due to security issues. In my case however I thought it’s acceptable. So here we go:

Solution

Those of you familiar with EE might know that you can display entries of a certain category by adding “C” plus the respective ID to the URL: e.g. .../journal/categories/C2. In this case EE would display all entries filed under category 2.

My approach was to define multiple categories “.../journal/categories/C2&C4&C6”, parse the query string via PHP, replace all “&” with “|”, assign the generated value to the variable “$query” and pass its value to the category attribute:

{exp:weblog:entries weblog=”{my_weblog}" category="<?php echo $query;?>" dynamic="off"}.

Hint: Please note the dynamic=“off” attribute that prevents EE from trying to parse the URL. Also make sure that you’ve turned on PHP parsing and that “PHP Parsing Stage” is set to “input”. Otherwise it won’t work. Have fun :)

Search hilite

One of the greatest features of Google toolbar is the highlighting of search terms. However most users don't know about Google toolbar or can't install it due to technical "limitations", such as when using browsers other that IE or Firefox :) I thought it would be a nice idea to highlight search terms on my site without having to install additional tools.

Fortunately there are some great plugins for WordPress as well as for ExpressionEngine that parse the HTTP header information and wrap spans with a certain class name around the respective words. I’m sure that similar plugins are also available for other CMS. So if you know some recommendable plugin, please post them in the comments section.

In my case I used the Search Highlighter plugin by Paul Burdick that highlights search terms for incoming searches from A9, Dogpile, Google, Lycos, Yahoo and… ExpressionsEngine. Yes it also works when using my own search engine. Nice :) Anyway just grab the plugin of your choice, configure it - and you’re basically done.

Scriptaculous Highlight

However I thought it would be even nicer to additionally highlight search terms using the “Highlight” effect of Scriptaculous’ effects library. So I made up a simple, Prototype based JavaScript class that applies the “Highlight” effect to all elements with a certain CSS class. I guess this will be appropriate in most cases. However feel free to tune, expand, modify and of course reuse it.

Download JavaScript Hilite Class

Well I guess I’ve tantalized you long enough - if you wanna check out the functionality just switch to Google, enter for example aqua style and click the link to my Aqua style tutorial. Btw make sure that you turn off ExpressionEngine’s cache functionality for the pages you wanna “enhance” with the highlight functionality - otherwise it won’t work :)

Wallpaper Devkit 2

I guess most of you still remember my first Wallpaper Development Kit published back in May. Now, more or less half a year later, I thought it was time to update my wallpaper as well as the Wallpaper Devkit.

The second incarnation of the devkit once again contains a Photoshop file with a placeholder, so that you can insert your own logo, a certain slogan or anything else that keeps you motivated. So if you think it’s time for some sort of “autumn cleaning” on your desktop make sure that you grab the template as long as it’s hot. Would be nice if you could share your versions with the rest of us by either providing a link or posting it on Flickr using the tag wpdevkit.

Download Wallpaper Devkit 2

Shopping Cart Icon

October 21, 2006

The other day I was working on an icon for an online shop. However at the end it turned out that we don't need it. So I thought it would be a good idea to share it with you guys, instead of leaving it getting dusty somewhere in a folder.

Download Shopping Cart Icon

So if you are ever in the situation that you need an icon for your online shop, feel free to use it. Most likely just need the PNG versions, however I also included icon resources for Mac, Windows and Linux. You never know :)

The Shopping Cart Icon in several sizes

EE: Installing Akismet

Over the past years spam has become part of our daily life. Just think about those spam mails polluting our inbox or comment spam on our website. Fortunately there are some nice tools to fight spam: One of them is Akismet.

Actually Akismet is not a “tool” - it’s a service that you may use on your weblog. When a new comment, trackback, or pingback comes to your blog it is submitted to the Akismet web service which runs some tests on the comment and returns a thumbs up or thumbs down. When the plugin catches something as spam it saves it in the database for 15 days in case you want to check it out manually and then automattically deletes it. If you use WordPress as your CMS of choice just grab the respective plugin from the download page, enter your API key and relax. In case you use another CMS just check the list of available plugins.

Akisment running on Expression Engine

Fortunately there is also an extension for Expression Engine. Once you’ve obtained a working WordPress API key, you can copy the respective files to your server. Install the extension in the “modules” section of the EE Control Panel and enjoy. Btw I’ve made use of EE’s custom tab functionality to gain quick access to the module, because I prefer double checking them manually. However up till now Akismet has not failed a single time. Give it a try.

Fresh Theme for EE

Still remember the previous skin of Bartelme Design? Do you want to use it one your own website? Well I'm glad to tell that it's now possible - at least if you use Expression Engine as your CMS of choice. Sadhana Ganapathiraju was kind enough to convert my old theme to a full featured EE theme. Thanks :)

Download Fresh Theme

Just in case that you’re not quite sure which theme I’m talking about - here is small screenshot. So if you’re interested make sure that you download the package from the respective site. Btw if you wanna convert the skin to a WordPress or any other theme, just grab the resources…

Update: The first WordPress port of my previous “Fresh?? theme has been released by ilemoned. Thanks. If you are interested, grab it while it’s hot :) Btw just inform me if you have also ported the design - then I gonna post a list of all available ports. Once gain thanks for your effort - I kinda like the whole thing :)

 

EE: Further updates

Over the last couple of weeks I was busy working on the site. Most of the changes took place in the background - namely by optimizing the use of templates, configuring caching behavior etc. - maybe you have already noticed a slight increase performance wise. Anyway there were also some more obvious improvements, I wanna talk about.

Search

As mentioned in my previous post I still had to work on the search functionality. Originally I intended to implement the same live search functionality as I used on the old site - but somehow I didn’t manage to do so up till now. I still have to have a closer look at EE’s search module. Anyway because I’m aware of the importance of search - especially in connection with blogging - I implemented a first basic variant. So enjoy :)

Contrast

When I released the first version of the new “Dark” skin, some of you mentioned that it was a bit too… well dark respectively that the the contrast was a bit low. I guess this was primarily true for those of you don’t using antialiased fonts. In this case I must admit that contrast was really damn low. So increasing the contrast was another task I worked on. Let me know what you think.

In addition I also refined the about section, added some links to recommended books and removed Google ads. Actually I was forced to remove them, since Google suspended my account. According to them I had a couple of “illegal” clicks, meaning that people clicked the ads several times or whatever. To be honest I can’t really imagine that, since the click-through-rate decreased significantly in the last months. Anyway I don’t really care about it and now you guys once again can enjoy an ad-free site :)

ExpressionEngine: Switched

September 17, 2006

I'm proud to announce that I made the switch. Fortunately I found a convenient way to migrate my old data to ExpressionEngine - namely by using EE's MovableType import functionality. I just had to create a text file with a specified format and EE imported all entries and its associated comments. So more or less all sections of Bartelme Design should work.

Refined Structure

When I started working on my new templates I tried to create an exact copy of the previous site. However after a while I noticed that this would definitely be the wrong approach. As some of you have already noticed, I stopped posting articles in the former “Articles” section. Instead I just posted them in the journal, which had a couple of advantages like commenting and archive functionality. So I cancelled the section and moved all articles such as “Aqua style with Illustrator” or “Creating organic wallpapers” to the journal.

Forum

I also removed the forum from the main navigation: on the one hand because I haven’t created any forum templates yet, and on the other hand because I’m not sure whether I wanna provide forum functionality any longer. Let me know what you think and how I could deal with the old data.

Search

By the way there are still some other sections respectively components not working or even missing. One of them is search. I also wanted to implement some sort of live search, but I still have to get a bit more familiar with EE’s templating system. So stay tuned :)

Updated layout

And last but not least I wanted to additionally emphasize the switch with a new layout. I actually tried to get the best out of previous layouts and to create a new one. Beside the dark color scheme, the fluid layout is probably the most mentionable change. Even though there is still a lot to do I had to go live, because I had no possibility to create further entries other than hacking tables using PHPmyAdmin. And to be honest, I wanted to avoid that ;)

So for the time being that’s actually everything I wanted you to know. Have a nice weekend. And to all of you guys currently enjoying “Oktoberfest”: Prost :)

Switching to ExpressionEngine

September 10, 2006

Since my old ASP based CMS does not work on my brand new Apache server, I really had to look for a new content management system. I know I have written about this topic several times ago, but I never could convince myself to switch. Mainly because of the great amount of work. But now it is kinda urgent.

So I once again had a look at several CMS, including Textpattern, WordPress, Drupal, Typo3 and last but not least ExpressionEngine. Actually I was not that impressed by Drupal and Typo3 - mainly because of their administrative UIs. So that was the easy part. Choosing from the remaining three CMS was the though part.

But in the end I decided to go with Expression Engine, mainly because of its convenient way of handling multiple weblogs, its templating system and the possibility to easily integrate a forum module. Fortunately Veerle recently posted several great articles on setting up EE as well as on creating templates. Thanks :)

Your advice

Even though I had a good start, I have one major worry: how to get all the old articles into the new CMS. That’s gonna be tricky. One possibility is to start from scratch and leave the old site untouched. Alternatively I could try to write some SQL scripts. Hm, I have to think about that. What do you suggest? By the way if you know any other great ressources on EE please let me know.

New Provider

September 09, 2006

You may have already noticed that the temporary header, stating that I experienced problems with my URL rewriting engine, is gone. Well it's not that my old provider finally managed to fix the problem - no, I've switched to a new one.

So finally I’m a proud owner of a brand new Apache web server with tons of great features, kindly hosted by Tribolis Web Solutions. So if you ever look for a new provider you should consider taking a look at their hosting plans. And if you decide to switch, do not forget to mention that you have been referred by me ;)

There is only one downside: since my previous CMS was written in ASP, it won’t work on the new server. So I really have to think about switching to a real content management system. Yeah I know, I have written about this topic several times before - but this time I really have to take off the gloves. Anyway, the most important thing for you is that the site now finally works as intended, including nice URLs etc. Cheers, Wolfgang

Accessible JavaScript Newsticker

Recently we had a forum post by Heiko in which he asked whether anyone knew a JavaScript or Java based newsticker. Actually I didn’t know any, so I decided to code one on my own.

Personally I don’t like conventional newstickers because of several reasons. First of all they are quite questionable from a usability point of view — the scrolling text distracts the user from the actual content. Secondly most of the implementations are not accessible, since they either use Java applets or JavaScript that does not degrade gracefully. And last but not least most implementations take up an impressive amount of CPU performance.

So I made up my mind and came up with a solution that more or less eliminates those downsides. The markup is actually nothing remarkable — just a simple unordered list and a wrapper div with a unique id.


<div id="newsticker">
  <ul>
    <li>Newsticker text 01</li>
    <li>Newsticker text 02</li>
    <li>Newsticker text 03</li>
  </ul>
</div>

Since many web developers already use the Prototype JavaScript Framework, and I also wanted to use Scriptaculous for some nice animations I also used Prototype for my ticker. So if you are interested you can either take a look at my sample ticker or download the source code. Btw of course you may use the script on your site. So have fun :)

Note: Even though I’m quite familiar with JavaScript there is of course room for improvement. So if you have any suggestions feel free to post them. Thanks.

Back again

September 02, 2006

This is just a quick note that I’m back from our vacation in beautiful Rab, Croatia. I would have enjoyed another week or even two — but nevertheless it was relaxing and I could stock up on some sunshine. If you are interested you can have a look at some photos.

Mail

Since I didn’t have a chance to access my mails for two weeks, my inbox is somewhat crowded: more than 1200 mails — whereas 90% of them are spam. Btw have you also noticed an extreme boost of spam mails over the last three or four weeks? It’s horrible. Normally I got about 5 to 10 spam mails per day — since a couple of weeks I get about 80 or more. Most of them are automatically moved to the junk folder, but it’s still annoying.

Anyway, there are still many mails in my inbox waiting to be replied on and I hope I can manage it by Sunday evening. Thanks for your patience :)

Link Problems

Actually I hoped that the link issue will be solved when I come back from vacation. But obviously that’s not the case. I already received a mail from my provider, stating that they have upgraded their servers and that the server crashes after installing the ISAPI rewrite engine. If they don’t manage to solve the problem I gonna have to change the provider.

Link Problems

August 18, 2006

I guess you have already noticed that Bartelme Design was more or less “offline” over the last couple of days. The reason were — or rather are problems with the URL rewriting engine. I’ve already contacted my provider but they have not replied so far.

In this particular case it’s even worse because I will be on vacation the next two weeks — and I’m not sure whether I will have access to the internet or not. So for now I have temporarily fixed the problem by pointing most of the links to normal URLs. Most of the site should work as usual. However there are definitely still some broken links. Sorry for any inconveniences. Cheers Wolfgang.

Mac OS X Leopard thoughts

August 07, 2006

Now that the yearly WWDC keynote is over I could not resist to post some thoughts on the first preview of Apple’s upcoming operating system — codename “leopard”. Short excerpt: some nice features, but no revolutionary changes… not yet.

Mail iconMail Let’s start with the good stuff. I really appreciate that Apple Mail will get another major update. In the new version you may create and manage ToDo-items directly from within the application. According to the related sub page you may use Mail for viewing RSS feeds. Huh? And what about Safari’s RSS functionality? Anyway, I doubt that I will use that feature — I’ll stick to NetNewsWire. Likewise I’m sure that I will never use those “Apple designed stationery-templates”. In fact I really hate HTML based mails — I mean except for newsletters.

Time Machine iconTime MachineTo be honest I’m not sure what to think about it yet. Nice idea, freaky interface… let’s see. I doubt that it will replace my default backup solution, but it will definitely be of good value to those people never doing any backups.

iChat icon iChat Great that it will finally be possible to log in to multiple accounts simultaneously. Even greater — desktop sharing. But I don’t care about those new freaky funky effects. Maybe I’ll give iChat a second chance — but currently I prefer Adium.

Spaces iconSpaces Spaces? Virtual desktops! Ahhh :) That’s what it’s all about. But in a neat and Apple-like style. If it’s as easy to use as Expose I will give it a try.

UI, Finder etc.

And what about the long rumored user interface and Finder related changes? Nothing. I’m kinda disappointed :( However there is still hope because the final version will not be available before spring 2007. What are your impressions? Did we expect too much? Does Apple “hold back” the UI related changes so that Redmond won’t start copying again? Is it worth upgrading? Let’s discuss.

Mighty Mouse Wireless

August 05, 2006

About a year ago Apple released their first mouse with more than one button. Some called it a revolution — I called it an imperative step. Not just because of those people switching from Windows to Mac, but mainly because of the fact that Apple continuously added features to their UI than could only be accessed via right-click.

Up till then I used Apple’s wireless bluetooth driven mouse. So you can imagine that I was kinda disappointed that Apple just shipped a USB variant. But anyway I finally bought one and to be honest — I never used the old bluetooth mouse again. The Mighty Mouse was much lighter and preciser than the old one.

One year later…

Now, one year later, Apple finally released the wireless variant of the Mighty Mouse. My first reaction was like: “Well, so they finally managed to release a bluetooth version. Should I buy one? Definitely no. The old mouse wasn’t that precise and the batteries didn’t last long enough.” But then I recognized that it was not just a bluetooth enabled Mighty Mouse, but that it also uses laser instead of optical tracking…

Mighty Mouse

Laser tracking

So what’s the difference? One important fact is that laser tracking is much preciser compared to old-fashioned optical tracking. Another advantage is that laser based mice work on nearly every surface — great if you have to be mobile and use it with your MacBook. And last but not least batteries tend to last much longer, because there is no LED at the bottom of the mosue.

Pros and Cons

  • precise
  • wireless
  • long lasting batteries
  • great design
  • heavy
  • expensive

Yesterday the package with my brand new wireless Mighty Mouse found its way from Eindhoven to Graz. First impression: looks exactly the same as the wired one. A bit heavier — but that’s okay. So let’s connect it to my MacBook. Hm, I first have to install the software — reboot — not quite Apple-like. But hey, works fine. By the way I took some photos — so if you are interested, head over to the respective flickr gallery.

Mac OS XP

July 14, 2006

Now it’s been more than a month that my new MacBook arrived — and I’m still impressed: The display is great, the batteries are really powerful, it’s one of the most quiet notebooks I’ve ever used and it’s extremely fast. But beside the performance boost switching to Intel based CPUs had another big advantage — it’s now quite easy to get a copy of Windows running on your Mac.

So why would someone consider installing Windows on a Mac? Well maybe you are a project manager heavily relying on Microsoft Project, maybe you are gamer or maybe your life is all about web design and you have to test your site on different platforms and browsers. I’m sure that I left out a bunch of additional usecases — but those were the ones that immediately came to my mind.

Dual boot or virtualization

Boot Camp iconOn a Mac you basically have two options how to install Windows: Dual boot or virtualization. Both have their advantages. For example if you wanna make use of the full power of your Core Duo, that’s most likely when you want to play Windows games on your Mac, you should consider the dual boot solution. So Boot Camp is the way to go.

Personally I don’t like the dual boot option since I don’t use my MacBook for gaming — the XBox 360 is the gaming platform of my choice :) The only Windows application that I really “need” is Internet Explorer for testing web sites. And rebooting each time I wanna check how IE interprets a recently made change to a CSS file ist definitely not acceptable.

Parallels

Up till now I had a second PC for testing purposes — however that was also kinda annoying. So I decided to take a look at Parallels and install Windows in a virtualization mode on my MacBook. For those of you who don’t know Parallels — it’s more or less VMware that is capable of running on a Mac :)

Parallels iconAnyway so I downloaded Parallels and installed a copy of Windows XP. The installation process took about the same time as on a normal PC — so after about half an hour Windows was up and running. The first thing I was really impressed of is the fact that the network respectively the internet connection just worked. I didn’t have to configure anything. Also the trackpad with its scrolling and right-click functionality worked perfectly. Great.

Performance

Another fascinating aspect is the over-all performance. Maybe it’s just the power of the Core Duo processor, maybe it’s the fact that my MacBook has 2GB of RAM or most likely a combination of both… anyway you can work smoothly with both operating systems.

Dashboard and Windows

Ease of use

Due to the limited screen size of my MacBook I prefer working in full-screen mode, which is of course part of Parallels’ feature set. Also switching between the two worlds is kinda nice since the same cubic effect as for fast user switching is used. However I prefer to work with it just as with any other application — meaning just hiding it via Cmd+H and restoring it by clicking the dock icon or via Cmd+Tab. It’s as easy as that :) If you are interested, I’ve taken some screenshots of the installation process.

The only downside I experienced so far is that I could not figure out how to write a simple @ or a backslash on my German keyboard. So your help would be really appreciated :)

Update: So for all those of you experiencing the same issues: in order to get an @ just hit ctrl+alt+q, for a backslash ctrl+alt+ß. And don’t forget to install the Parallels tools for some nice features and smoother cursor movement.

Spring Cleaning Part 2

In the first part of “Spring Cleaning” I mentioned that the new layout of Bartelme Design is still in progress. And well… obviously I continued to tweak and polish minor and major parts of the site. So here is the result…

A couple of days back I looked at my site and thought: “well, actually there is still something missing”. And after a while I realized that this “something” was the lack of green color. So I decided to adapt the color scheme and finally I ended up with a design inspired by the Fresh theme I used one or two years ago.

So will this be the final design? Well I’m afraid to tell but I’m not completely satisfied yet. I still have to try the one or the other thing, twist and turn things around, realign etc. — so expect further changes within the next couple of days. Thanks for all your feedback and have a nice weekend. Cheers, Wolfgang

Update: By the way, if you wanna trace the redesign process head over to my flickr page.

Getting spammed

I guess most of you have already seen it — I’m currently experiencing severe problems with spam entries. Each time I visit my site I have to face a bunch of new cialis, viagra etc. entries: forum posts, replies and comments.

Since I’m using my homebrew CMS I don’t have the possibility to use any of those plugins available for WordPress etc. to get rid of those annoying entries. I’ve already written some sort of spam filter using PHP — but obviously it doesn’t work.

So you guys are my last hope. Do you know any recommendable tools — preferably written in PHP — that can either check if a submitted comment is spam or — and that would be much better — that can check whether a visitor is a “real” visitor or just one of those spam bots?

I’ve already received some recommendations such as Akismet or Captcha in the forum but I just want to make sure that I don’t overlook any great tools. Thanks.

Update: I kinda liked Danilo’s idea of providing an additional input text field, that is hidden via CSS — so that it would never be filled in by a real user. Simple, easy to implement — I like such approaches. I’ve already implemented it in the forum section — well let’s see if it works.

Spring Cleaning

Now after the wedding and the summer approaching — actually it’s the first time that we have more than 30°C this year here in Graz — it is time to polish my web site. So if you read this entry in your RSS reader you may wanna switch to the HTML version and have a look at it.

I bet you already had some kind of foreboding that a site update is imminent as soon as I published the wallpaper devkit with my new logo. Well you were right. I already worked on a new design for a couple of months. I guess I had about five different designs ready to go online — however none of them really convinced me. So I started over again…

But now I finally found a design I am really fond of. It’s a bit lighter than the previous version and it is called “BDlight” — some kind of play on words combining BD (Bartelme Design), light and delight. Oh man I like those wordplays :)

In progress

The design is still in progress — meaning that there are still some bugs to be fixed, some elements to be realigned. Actually if I haven’t put the site online now I would have waited another one or two months and most likely I would have come up with yet another design. Anyway the over all look and feel will now stay the same (at least for some time) and the site should work in all modern browsers. However if you experience any problems feel free to contact me. Well that’s basically everything. Have a nice weekend. Cheers, Wolfgang.

Getting married

June 08, 2006

Normally I don’t use my blog for personal posts — but this is an exception. Today I gonna get married with my dear Jasmin. With just about 8 hours left, I’m getting more and more nervous.

Let me take the chance to thank everybody involved in organizing the wedding. You’ve all done an amazing job. And Jasmin… I love you and I’m looking forward to spending my life with you my dear.

That’s basically all for now. Uh, just 7 hours and 50 minutes left… :)

Update

Thank youg guys for all the your best whishes. The wedding was great — and Mrs. Bartelme looked gorgeous. I’ll post some more photos as soon as we receive them from our relatives, friends and of course from the photographer.

MacBook arrived

June 03, 2006

It seemed like ages until my recently ordered MacBook found its way from far away Shanghai to Graz. After continuously refreshing the TNT tracker site I finally spotted the relieving “out for delivery” status message.

First impression

After opening the package — of course I’ve taken some pics :) — I was really impressed of my new toy. It’s compact, light and extremely sexy.

As previously discussed, the aspect I was most interested in was the new glossy display. In contrast to the Pro series you may not choose between the matte and the glossy version — so I had to bite the bullet. But hey man, the display is great. Glossy? Yes! Bright colors and contrast? Yes! Reflexions? Nearly any. Congratulations Apple, this was definitely the right decisions to ship the new MacBooks with this display :)

My new MacBook

Another intersting aspect was the keyboard. Normally I don’t really like notebook keyboards. The keys are tiny and therefore I tend to frequently hitting two buttons at once. But this one is different — even though the several key are also quite small, the gap between them pervents me from such faux pas. And by the way — they look great :)

MacBook keyboard

MacBook or MacBook Pro?

Back in the days of iBooks and PowerBooks I would definitely have bought a Powerbook. There was a huge difference between those two series — performance wise and also concerning design. Actually I never really liked the design of the old iBooks — they looked kinda clumsy.

But after introducing the new MacBooks those differences were gone — more or less. Of course you still get a larger display, a real graphics card and an aluminium enclosure when buying a MBP but performance wise they are quite identical. Furthermore I was thinking about how I would actually use the notebook… As my main working computer? No way — I’m really satisified with my Dual G5 and my Cinema Display. For checking emails, posting weblog entries, doing presentations etc.? Definitely.

So there would have been no need need for a real graphics card or a larger display (actually 1280x800px is large enough). And hey man — the white plastic enclosure looks far better than the aluminium one :)

Wallpaper Devkit

Today I played around in Photoshop and finally I ended up with a wallpaper I kinda liked. Basically it’s a very simple one — inspired by early Windows Vista wallpapers — with my new logo in the center.

Since I guess that you don’t wanna use the wallpaper with my logo I thought it would be a good idea to upload the Photoshop file so that you may adapt it to your needs. The template has a resolution of 2560x1600px so it might take a while to download. Have fun.

Download Wallpaper Development Kit

Just in case that you still want to use my variant you may download it by clicking the picture below :)

Download Official Bartelme Design Wallpaper

Too glossy?

May 18, 2006

Well obviously I am talking about the glossy displays of the recently released MacBooks. The new display provides more brilliant colors and much improved contrast. The downside — annoying reflections.

One of my displays already has this sort of glossy screen — and I must admit that I love those bright and intense colors. The reflections don’t really bother me, since I ain’t got no bright light sources behind my working place.

Now I’m playing with the thought to get a MacBook Pro and I’m not sure which one to take since in contrast to the normal MacBook you have the option to choose between a conventional display and a glossy one. I mean I really like those glossy displays — however I fear that the reflections will be quite annoying when using it in different environments or maybe even outside.

Well what’s your point of view? Would you choose the new display or rather stay with the conventional matte one? Your opinions are much appreciated :) Btw here are some galleries of the new MacBooks highlighting the pros and cons of the display.

Optimizing strokes

When creating artwork and especially icons with Adobe Illustrator you may have already faced the problem that your rasterized icon looks a bit blurry. Most of the time this is the result of poor scaling or because of the wrong use of strokes.

Illustrator CS2 IconTherefore many colleagues argue that it’s better just to use shapes rather than a combination of shapes and strokes for creating your artwork. Shapes tend to be easier to handle and you can play with additional effects, apply gradients etc. Well I partly agree. However there are a bunch of advantages if you use strokes such as that you get much crisper edges when scaling your icons. By default Illustrator aligns the stroke to the center, which is the main reason for those blurry edges.

In older versions of Illustrator you either had to play with the order of the several appearances in the respective palette or you had to use even numbers for your stroke’s weight to achieve crisp edges. Since Illustrator CS2 you may easily change the alignment via the three options in the “Stroke” palette. Spot the difference.

The difference between the three border alignments

CSS Naked Day

April 05, 2006

If you are reading this piece of text directly on the web site and not via some sort of feed reader you might have noticed that I removed my CSS. The reason? Well today is the official CSS Naked Day, initiated by Dustin Diaz.

The idea behind this event is to promote Web Standards. This includes proper use of (x)html, semantic markup and good hierarchy structure. For more information head over to the original article.

Update

So here we are back again with the full feature layout. It was kinda interesting to watch the different reactions on this initiative. Some argued that it would be a weird idea to remove the CSS, since it is essential for modern web sites. I fully agree. However I’m convinced that the best or rather the most effective way to promote the use of standards is not to use them — at least for a short period of time. Anyway now the layout is back. Have a nice day, Wolfgang

CSSViewer: Firefox Extension

April 02, 2006

Each time I work on a web site I get into the embarrassing situation that I can’t tell why specific elements of a page behave in a certain way. Most of the time it’s just some sort of nesting respectively inheritance issue. But how can I find out which CSS properties apply to which element?

Fortunately there are tools that bridge the gap. One of them is “CSSViewer”, a free Firefox extension that displays all properties of a specific element. After installing you can activate the extension via “Extras — CSSViewer”. Now you may move the cursor over those elements you are interested in — and the extension displays all their properties. Neat.

CSS Viewer palette

Of course there are other more sophisticated tools such as Xyle Scope that provide an even better overview of all the styles applied to your elements — unfortunately it is Mac OS only and costs about $20. So CSSViewer is quite a good alternative.

Creating graphs, Part 2

In the first part of the tutorial I showed you how to create three dimensional charts using Adobe Illustrator CS2. In the second part we will focus on how to visually enhance those charts.

Now that we’ve learned how to create basic charts using Illustrator’s 3D functionality we will enhance them by applying some reflections and subtle gradients. After creating your chart it will probably look similar to the one show in the screenshot on the left.

In a first step select the chart and duplicate it by pressing Cmd+C and Cmd+F. This will create a copy of the selected object and paste it in front of the initial object. In order to better distinguish between the two objects move the new one a few pixel to the top. Personally I prefer to use the arrow keys (Shift+Up) since it’s easier to move the object back to its initial position afterwards.

Now that we have duplicated the graph we need to expand the graph. This is necessary because it’s not possible to edit smart objects such as graphs etc. So select the object and choose “Object — Expand…” from the main menu. The result should look similar to the screenshot on the left.

Now we ungroup the object using the shortcut Cmd+Shift+G twice. After that we can modify each part of the graph. In a next step select all slices via Shift+Click and make sure that the pathfinder palette is being displayed. If that’s not the case you can display it via the “Window” menu or by pressing Shift+F8.

Now with the slices selected first click the “Add to shape area” button (1) and afterwards the “Expand” button (2). We have just combined the different slices to one ellipse.

Now fill the shape with white color, duplicate it and move it up two or three pixels. Now with both shapes selected first click the “Subtract from shape area” button and afterwards the “Expand” button in the pathfinder palette.

In a next step we apply an opacity mask to the new shape. So make sure that the shape is still selected and choose “Make opacity mask” from the transparency palette. Now switch to the mask mode by clicking the black rectangle in the transparency palette and draw a white rectangle as shown in the screenshot.

Select the gradient tool from the tools palette on the left and fill the rectangle with a radial gradient (white to black). The result should look similar to the screenshot on the elft. You may now exit the mask mode by clicking the white rectangle in the transparency palette.

You have just created the main reflection for our chart. Next we will create the subtle reflection on the lower left part of the chart. Select the lower part of the graph, right click and select “Release Clipping Mask” from the context menu. Then click “Add to shape area” and afterwards the “Expand” button in the pathfinder palette. Now you have a single shape we can fill with white color.

In a next step apply an opacity mask on the newly created shape, draw a rectangle and fill it with a linear gradient so that the result looks similar to the screenshot below.

Now move both shapes down to their initial position. Then select the lower shape, head over to the trasparency palette, change its layer style to “overlay” and its opacity to about 40%.

Basically you’re finished. Now it’s up to you whether you additionally apply a dropshadow, some further reflections, gradients etc. Enjoy.

Creating graphs

Every now and then you may come into the situation that you have to present some sort of statistical data to your client. Of course you may use Excel’s graph tool to easily create a bunch of charts — but let’s face it, more or less all of those predefined designs suck. So you have to look for another option.

This tutorial will show you how to create visually appealing charts using Adobe Illustrator’s graph tool. Before we start, let us take a look at the potential outcome of this tutorial. In my case the graph shows the browser usage of Bartelme Design in January 2006.

the outcome of this tutorial

select the graph toolIn a first step open Illustrator and create a new document. Afterwards select the “pie graph tool” from the “tools” palette on the left. Note that by default only the “column graph tool” is visible. In this case just click on the respective icon for some seconds to unveil the other tools.

With the pie graph tool selected click somewhere on your working area. Illustrator prompts you to define the size of the chart — 200x200px should be fine. Now Illustrator will display a grid where you can enter your data. If you want to create a legend you just have to enter the respective label into the first row of the grid. In our case though we won’t make use of the automatically generated legend, so just enter the actual data. Click the “apply” button in the upper right corner to update the graph. You may now close the grid

the data grid

By default Illustrator displays the different slices in shades of grey. But personally I prefer colored graphs — so we gonna apply some color: Select the “direct selection tool” from the tool palette on the left (Shortcut: A), click on a slice and select the desired color from the color palette. Note: If the color palette is not visible you may display it via “Window — Color” or by hitting the F6 key.

colored pie chart

If you prefer flat graphs then you’re basically finished. In our case though we wanna make use of Illustrator’s 3D effects. Select the graph and open the “Extrude and Bevel” dialog via “Effects — 3D — Extrude and Bevel“. Choose ”Isometric Top“ from the dropdown menu, set the ”Extrude Depth” to about 25pt and confirm by clicking the OK button.

extrude and bevel dialog

the outcome of this tutorialAfterwards your graph should look similar to the one on the screenshot on the left. Since you have just applied the effect rather than modified the object you may still change the graph’s data as well as the 3D settings.

Basically we are finished. Finally you may enhance your graph by adding a title, a legend or other descriptive elements respectively by adding some visual effects such as a drop shadow or something similar. Enjoy.

the outcome of this tutorial

Connect360

February 12, 2006

About a month ago I bought a brand new XBox 360. And I must confess I really love it. The only downside is the lack of connectivity if you wanna use it together with a Mac. Fortunately there are tools like Conncect360 that are bridging the gap.

Connect360 from Nullriver Software is a small $10 shareware that automatically indexes your iTunes and iPhoto libraries and shares them to your Xbox 360. You can then use the Xbox 360 Dashboard to browse and play your media, organized in the exact same way that it is on your Mac.

Connect360 User Interface

Connect360 works with both the Xbox 360 built in network port (wired) and the Xbox 360 WiFi adapter. The built in Access Control List (ACL) feature allows you to easily limit what Xbox 360s can connect to your Mac. Great piece of software — give it a try.

AppRocket

February 08, 2006

If you are Mac user you probably know the application “Quicksilver”, that provides you with a way to easily access all kinds of information on your computer. So all your applications, bookmarks, contacts etc. are just a few keystrokes away. AppRocket is more or less Quicksilver for Windows.

So what does AppRocket actually do? Well it’s basically a small app that runs in the background and creates an index of all items on your computer. This includes applications, folders, files, bookmarks, playlists and so forth. Now for instance if you wanna launch Firefox, you just bring up the application by hitting “Alt+Space” and begin typing the first characters.

Shortcut Alt + Space

AppRocket now displays a list of potential results in small listing — with the most likely one at the very top. Now you just have to hit the return button in order to launch or view the respective item. That’s it. Really simple, really fast, really convenient. Give it a try.

Approcket’s user interface

RSS Reading Preferences, Part 2

February 04, 2006

As promised here are the results of my latest survey concerning RSS reading preferences. Generally speaking there were no real surprises, but quite strong tendencies towards certain products respectively behaviors.

Preferred RSS Reader

First of all let us take a look at your favorit RSS readers. According to the results most of you prefer NetNewsWire — especially NetNewsWire Lite, which is free. Interestingly enough Safari comes of second-best. Actually I did not expect that :) On the third position we have the web based RSS reader “Bloglines”.

Preferred Feed Reader

Number of subscribed feeds

I expected that most of you are subscribed to quite a bunch of feeds. Astonishingly about two-thirds of you are subscribe to less than 150 feeds.

Subscribed Feeds

Refresh frequency

That was kinda unambiguous. I don’t know whether it depends on the RSS readers’ default refresh rate, but most of you seem to check for updates approximately every half an hour. That’s what I call frequently :)

Reading Frequency

Full articles vs. excerpts

And finally your preferences concerning feed format: whereas most of you don’t mind about the technical format (RSS 2.0 or Atom), most of you seem to prefer full articles over excerpts due to several reasons. Mainly because of better searchability or because it’s ossible to read articles while not being online. Interesting aspects… Maybe I should update my feed ;) What do you think?

Full articles vs. excerpts

RSS reading preferences

January 12, 2006

Within the last couple of days I talked with a bunch of people about RSS reading behavior. Astonishingly the preferences of the specific persons diverged significantly. So out of curiosity, how do you preferably handle RSS feeds?

What I’m actually most interested in is:

  • Which RSS reader is your favorit one? Why?
  • How many feeds are you currently subscribed to?
  • How frequently do you check for new articles?
  • Do you either prefer feeds that contain complete articles or rather those that just contain a short excerpt? Why?
  • If you prefer those feeds with full articles, do you still visit the actual web site on a regular base?
  • Have you any preferences regarding RSS format? I mean RSS 2.0, Atom etc.

Would be great if we could get an adequate amount of opinions. In this case I would post a follow-up article summarizing the result. Well I guess it should be probably me to start. So here we go:

My Preferences

Currently my favorite RSS reader is definitely NetNewsWire. Mainly because it’s the only reader capable of managing a great amount of feeds. That’s quite important, since I’m currently subscribed to about 170 feeds.

Basically I prefer reading an article on the actual web site, even if the feed includes the whole article. This is mainly because articles tend to look more appealing on web sites than in RSS readers — at least from my point of view.

Ruby on Rails workshop

January 09, 2006

Just a quick note for all those of you who wanna get started with Ruby on Rails. Sebastian Gräßl is doing a workshop on the 21st and 22nd of January right here in Graz, Austria.

Ruby on Rails logoSo if you wanna combine learning Ruby and a visit to beautiful, snowy Graz check out the respective info page for more information. Conditions: You should have knowledge of at least one programming language and you should already have worked with HTML, Javascript and CSS. So no excuse… ;)

Jumsoft Process

January 08, 2006

From time to time I stumble upon tools, I wish I would have known before. One of those tools is “Process” by Jumsoft. Process provides you with a flexible framework you need to get things done.

If you are like me and use iCal or any other calendar application such as Sunbird or Microsoft Outlook respectively Entourage for managing your tasks, you might be somewhat annoyed of all the limitations and kinks. In that case you should consider taking a look at “Process”.

Functionality

Basically Process is a tasklist with a bunch of useful enhancements. For example you can create projects, the tasks can be associated with. And if you are working in a smaller team you may even share projects via Bonjour. Everyone on the network can collaborate on the project and even download and upload Source documents. You may even sync your tasks with iCal.

Screenshot of the application window

By the way “sources” are documents, hyperlinks etc. that can be associated with specific tasks. Just drag an existing document to the “sources bar” and Process creates a shortcut to the respective document. Voila.

Add sources via drag and drop

Ever wanted to group or rather nest a bunch of tasks? No problem — with a simple click you may nest tasks in arbitrary depth. Great.

Nested tasks

By the way, how do you organize your tasks? Do you use similar applications or have you created your own task management system by means of an Excel Sheet or a even a real application? I’m eagerly awaiting your answers… :)

Feed icon template

December 29, 2005

I really appreciate Microsoft’s decision to adopt Firefox’s feed icon. So you might guess that I was even more excited when I heard of Matt Brett’s “Feed Icons” project.

The project I’m talking about is actually a web site, dedicated to the new standardized feed icon. There you can download the icon in a bunch of different sizes and formats. You may even download an Adobe Illustrator file, so you can customize the icon to fit your site’s color scheme.

I’ve already downloaded the package and since it’s not yet possible to upload customized versions to the web site, I thought it would be a good idea to publish them on my own site. Beside the PNG resources (16px to 128px) the package also includes an Illustrator file, so you may adapt the icon’s appearance or size. Hope you enjoy.

Bartelme’s Feed Icon

CMS advice

December 27, 2005

As some of you might know Bartelme Design is based on a self made CMS — One the one hand because I really enjoy coding my own stuff and on the other hand because no CMS really fitted my needs — at least I thought they wouldn’t…

But then I started working on a project based on WordPress. And I must admit that I’m really impressed of its functionality and ease of use. So now I am playing with the thought to retire my old CMS and convert to another one.

However there is one major problem, which I currently don’t know how to deal with: How can I switch to WordPress or any other CMS without ending up in a mess of broken links? Any ideas? Your help is much appreciated :) By the way, what’s you favorite CMS?

Merry Christmas

December 23, 2005

I just wanted to take this moment to wish all of you a Merry Christmas. Thanks for your support and input. All my best wishes and enjoy the holidays. Cheers, Wolfgang.

Marry Christmas

iCollection Update

December 08, 2005

Actually I’m really late, because the new iPods have been released quite a while ago. Anyway I just wanted to let you know, that I’ve just added two additional icons to the iCollection iconset — a black as well as a white iPod 5G icon. Enjoy.

iPod nano

As always the icons are available for Mac OS X, Windows as well as for Linux. If you experience any difficulties or if you have further objections and suggestions — please let me know. Cheers, Wolfgang.

Design your PillBoy

December 08, 2005

Just a quick note for all you graphics enthusiasts out there. Gavin Strange from JamFactory has started a great vector illustration project that you may be interested in.

PillBoy

The project I’m talking about is called “PillBoy” and is all about one neat, little monster that needs to be customized. Huh? Well Gavin created the illustration a while ago and enjoyed playing around with different color schemes and subtle modifications. So he put up a flickr gallery displaying all the custom PillBoy’s from everyone that designs one.

David Lanham’s PillBoy

So if you wanna take part, just head over to the gallery, download the template, create your own PillBoy and send it to gav||jam-factory.com. Have fun :)

David Lanham’s PillBoy

Hard disk advice

November 26, 2005

Once again I need your advice: Some days ago I noticed that the S.M.A.R.T. status of one of my internal hard disks of my PowerMac has been set to “Status Bad”, indicating that a failure may be imminent and that it should be replaced.

So I’ve already created a complete backup of the disk — and now I’m looking for an ideal successor. And since I’m not that familiar respectively not quite up to date with what is currently state of the art, I would appreciate recommendations from you guys. What I’m concretely looking for is an internal S-ATA with about 160GB or more.

Preformance vs. Silence

Of course performance is crucial — but noise or rather silence is even more important, because of my PowerMac’s perforated case. By the way I’m also looking for an external hard disk with about 250GB which should also be as quiet as possible — performance is not important at all. Any suggestions? Thanks a lot :)

iPod Cover

November 15, 2005

Maybe this is old news — but anyway. Just a quick note for all those of you, who consider to buy a new iPod but worry about its susceptibility to cracking respectively getting scratched: not only the new iPod nano but also the normal iPod series now ships with a protective cover.

The new iPod with its protective coverA couple of days ago my girlfriend’s iPod arrived and I was kinda suprised when I figured out that the package also included a small sleeve intended to protect the surface from scratches. Even though it’s not made of high quality material such as leather or something similar it serves its purpose. By the way if you are interested in more pictures, head over to my Flickr account.

Creating Badges: Part 2

November 13, 2005

Due to popular demand I’ve decided to write some kind of follow up tutorial to the “Creating Badges” tutorial. In the second part you will learn how to turn your basic shape into a glossy, three dimensional badge.

This tutorial starts from the assumption that you know how to create a badge like shape in Photoshop — this is discussed in the first part. So after creating the basic shape open the “layer style” window of the respective layer and assign a decent drop shadow as well as a linear gradient. You may choose similar values as shown in the screenshot below.

layer style window

Now your basic shape should already look more badge like — but there are still some more steps to be performed. First of all we will create the subtle reflexion: Load the shape’s selection by “Cmd” respectively “Ctrl” clicking the respective layer in the layer palette. Afterwards contract the selection by one pixel — this can be achieved via “Select — Modify — Contract”. Create a new layer and fill the selection (6).

steps six to nine

In a next step set the layer’s blending mode to “Overlay” and reduce its opacity to about 40% (7). Now select the elliptical marquee tool from the tools palette, select the lower part and press the delete button (8). In order to get a similar result than shown in step 9, switch to the quick mask mode and draw a gradient, similar to the one show in the screenshot below. Now switch back to the standard mode and press the delete button.

steps six to nine

Now our badge already looks quite okay, but it’s still some kind of flat. Of course we could use Photoshop’s bevel and emboss effect… but I prefer another technique: Once again load the selection of the basic shape, contract it by one pixel, create a new layer, fill the layer, set its opacity to 40% and its blending mode to “Overlay” (10). Now load the selection of the newly created layer, move it down one pixel (11) and press the delete button (12).

steps ten to thirteen

Now we create the bottom bevel the same way — but instead of “white” use “black” as fill color and reduce the layers opacity to about 20%. Congratulations you’ve just finished your glossy, three dimensional badge (13).

Creating Badges

November 12, 2005

A couple of days ago we had a forum entry on how to create badges, like those used on Bartelme Design to indicate new entries. So here is a short description of how to create them using Adobe Photoshop.

Photoshop’s Tools PaletteThe best choice to create a badge like form is to use one of Photoshop’s basic shape tools. Activating the “Polygon Tool” in the tool palette (1) and define the number of sides of the polygon in the properties pane at the top of the screen (2). In our case a number between 26 and 30 will be ideal. If you now draw a polygon, you will just get a circle like shape — so we have to define further settings.

Click the arrow button (3) next to the input field, in which we have just defined the number of sides, in order to reveal a drop down menu holding further polygon related options. Activate the checkbox “Star” (4) and define some indent (5).

Photoshop’s Tools Palette

If you now draw a polygon the result should look similar to the one displayed in the screenshot below. After applying some gradient, a border and a drop shadow, our badge is finished. That’s it. Hope you enjoy. If you are intersted in how to turn your basic shape into a glossy, three dimensional badge, check out the second part of this tutorial.

Photoshop’s Tools Palette

Safari Tab Behavior

November 04, 2005

The latest update of Mac OS includes a brand new version of Safari. This new version is the first public available browser that passes the acid2 test. However after installing the update, a bunch of plugins once again refused to work.

So headed to the respective web sites to download the most recent versions. After installing “Saft” I noticed that Safari’s tab behavior has changed.

Safari Screenshot: Starting Situation

The screenshot above shows the initial situation: four tabs opend, the second last is selected. In previous releases closing the selected tab (1) caused Safari to select the next tab (2).

Safari Screenshot: Supposed Situation

However with the latest release of Saft, Safari selected the first tab (3), which was really annoying. After a while I figured out that the reason for this behavior was the new “focus last selected tab” setting located in the Saft preference pane.

Safari Screenshot: Actual Situation

From my point of view such settings shouldn’t be activated by default. So just in case that you’ve experienced the same problems, make sure that you uncheck the respective checkbox.

Custom DTD

October 30, 2005

A couple of months ago introduced you Safari’s new search field — a special HTML form component, that looks and behaves just as the search field of Mac OS. However there is one drawback: the custom attribute “search” prevents your site from validating.

In order to make Safari display this custom input field you just have to assign another type to the input element — type=“search”. If you don’t mind whether your site validates or not, this approach is absolutely okay since search fields degrade gracefully in other browsers. However if you do care, you can make use of one of the following techniques.

JavaScript

The first and more obvious technique is to replace the type attribute using JavaScript. Since the W3C Validator does not interpret JavaScript, it only validates the following HTML…

<input type="text"/>

instead of…

<input type="search"/>

This techniques is perfect when viewing the site with a javascript enabled browser. However if javascript is disabled, Safari users or rather Apple Webkit users will just get a plain text field. And since your site will probably also be viewed with RSS readers such as NetNewsWire or NewsFire, in which javascript is disabled by default, this approach is somewhat half-hearted. So let’s better take a look at the second technique.

Custom DTD

So how can we assign this proprietary value to our search field without intimidating browsers and the W3C validator? Well the answer is quite simple — by defining a custom DTD that extends XHTML a bit to include our custom attribute. This custom DTD defines our special attribute value, and the validator obeys by checking the document structure against our special flavor of XHTML. If the DTD says the value is valid, they’re valid.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
    [
      <!ATTLIST input type
      (text|submit|checkbox|radio|button|password|search)
      #REQUIRED>
    ]>

However if you look at the example you will recognize that all browsers except for Opera render the closing parenthesis ]>, which is quite annoying. But if we apply some negative text-indent to the body element, we can get rid of it. For further reading check out the following articles: Validating a Custom DTD and More About Custom DTDs at “A List Apart”.

Apple Product Updates

October 13, 2005

Well obviously I am a bit late. Many others have already commented on Apples new masterpieces: the new iPod 5G, capable of playing movies and the updated iMac G5 with integrated iSight and remote control. Anyway here are my first impressions.

iPod movie

the new iPod 5GSo finally Apple reveiled their long rumored iPod movie, which is much lighter and thinner than the old ones and is now able to play movies. But it is not the movies that make me really want this new piece of hardware — it’s the hardware itself. Just look at the pictures and you will definitely know what I am talking about.

It was no surprise, at least for myself, that the new iPods look similar to the recently announced iPod nano and are also available in both black and white. They are thinner, the beveled shape has been replaced with a more angular one and the display is much bigger. Well done Apple, simply stunning.

the new iPod 5G

Will I buy the new iPod? Probably. Probably not, because up til now I am quite satisfied with my 4G iPod. And even though it does not look that great and it doesn’t have a color display I currently don’t see the need to update: I still have enough space for my music, the battery still works perferctly and honestly I don’t really care whether my iPod has a color screen or not when I am carrying it in my pocket ;) But on the other hand I said the same thing about the Mighty Mouse — and after some weeks I bought it nevertheless ;)

iMac G5

But even more amazing than the new iPod is the updated iMac G5. Why? Well beside some minor performance related upgrades and the fact that its enclosure has become thinner, there are three further aspects, that make the new iMac a real killer machine.

Front Row — the new home entertainment software form Apple

First of all the integrated iSight, which will definitely have a positive impact on the propagation of audio and video conferencing. And secondly, and from my point of view much more important, the new Apple Remote Control, that enables you to control your Mac in a convenient way while relaxing on your couch.

In combination with Apple’s new home entertainment software “Front Row”, Apple finally managed to produce a fully featured home entertainment center. The only drawback: once again videos and series can only be purchased from within the United States. Come on Apple, hurry up. I wanna enjoy the same services here in Europe.

Status Quo

Well I must admit that it was a bit quiet here on Bartelme Design. The last entry was posted more than two weeks ago and people already asked me whether I am still alive or not. So let me take the chance to provide you with some background information. Well obviously I am still alive and I am also glad to tell you that I am working intensively on the future of Bartelme Design.

But honestly I was rather working on the business part of Bartelme Design than on the blogging part. Why? Well some of you may know that I was, or am working at Hyperwave as a user interface designer. Unfortunately Hyperwave went bankrupt two weeks ago and the future of the company is quite uncertain.

For this reason I spent most of my time on exploring possible alternatives. And one obvious alternative is to concentrate more on Bartelme Design as a design company rather than just a personal blog. Currently I can’t tell how much time I will be able to dedicate to freelancing — this will mainly depend on futurities — but it will be definitely more than in the past.

Well although I am not quite pleased with the current situation I think it is a great chance to start something new. Anyway, I just wanted you know that I am still here, still alive and still confident that I will be able to spend more time on blogging soon. Cheers, Wolfgang.

Semantic Headers

September 24, 2005

Recently I stumbled upon an interesting article by Martin Labuschin, in which he describes how to create semantically correct web site headers. He suggests to make use of a h1 element and an arbitrary image replacement technique.

Well at a first glance this approach seems quite obvious and understandable, since the site’s title is a quite important part of the page. But wait. Isn’t there another HTML element designated to holding the site’s title? What about our good old friend the title element? Exactly, this element is definitely the best choice if you want your page’s title to appear on your site — especially because screenreaders tend to read out its content each time you open a HTML page.

Visual Browers

However this approach has one drawback. Visual browsers just display the title in the… well title bar of the browser window. But in most of the cases the title respectively the logo should be displayed prominently within the actual page. So how can we achieve a header displaying the site’s title, both visually appealing and semantically correct? After a short discussion Martin and me came up with a solution that both of us felt confident with. So here we go…

The outcome of this tutorial: a web site header

Markup

We both aggreed on the fact that our header should support users of screenreaders or PDAs in navigating the site. In both cases you have to read the site chronologically — so it is not possible to easily skip between the different sections. Hence we provided a set of links, leading the user directly to the most important areas of the page. In our case these areas are: the main and the secondary content (sidebar).

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent">
      skip to primary content</a></li>
    <li><a href="#sidebar">
      skip to secondary content (Sidebar)</a></li>
  </ul>
</div>

Accesskey

Well this is quite practical, but we can further improve accessibility by assigning accesskeys to the respective links. Accesskeys are not just a convenient way for screenreader users to quickly access specific areas of elements on a site, but also for user of visual browsers. If you decide to use accesskeys on your site — and trust me, you should — make sure that you first read this excellent article on accesskey standards on Clagnut. In our case we exemplarily assigned “1” to skip to the main content and “2” for skipping to the secondary content (sidebar).

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent" accesskey="1">
      skip to primary content</a></li>
    <li><a href="#sidebar" accesskey="2">
      skip to secondary content (Sidebar)</a></li>
  </ul>
</div>

Another common element that should be accessible via an accesskey is the search field. But in contrast to our “skip” links, the accesskey attribute should be defined directly on the search label.

<label for="search" accesskey="3">Search:</label>
<input type="text" id="search" name="search" />

Navigation

Of course we also want the header to hold our main navigation, so we have to add an additional list of menu items. Now that we have completed our markup, our HTML page looks like this.

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent" accesskey="1">
      skip to primary content</a></li>
    <li><a href="#sidebar" accesskey="2">
      skip to secondary content (Sidebar)</a></li>
  </ul>
  <ul id="navigation">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

CSS

Now it is time to turn this plain HTML into a visually appealing header using pure CSS. In a first step we apply some basic styling to our header element: a fixed height as well as a repeating background-image.

#header {
  background: #1e2b4d url(bg_header.gif) repeat-x 0px 100%;
  margin-bottom: 30px;
  height: 105px;
  overflow: hidden;
  position: relative;
}

Hide skip links

Afterwards we have to hide all “skip” links from visual browsers. Note that we don’t use “display: none”, because doing so would also hide the respective markup from screenreaders, which is definitely not intended. Now our page already looks like a header.

#quickskip li {
  position: absolute;
  visibility: hidden;
}

Styling the navigation

In a next step we will style our main navigation. First of all we remove the bullets using list-style: none — and since we don’t want our list items to appear below but next to each other, we float them.

#navigation,
#navigation li {
  float: left;
  list-style: none;
}

Now we positioned the whole navigation absolutely. Important note: don’t forget to assign position:relative to the header — otherwhise the property bottom: 0 would relate to the html element. Preview.

#navigation {
  position: absolute;
  bottom: 5px;
  left: 16px;
}
#navigation li a {
  color: #fff;
  display: block;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  padding: 0 1em;
  text-decoration: none;
}

Logo

And finally we just have to display the logo.  In order to accomplish this task we assign a background image to the ul element of our skip links. That’s it. Preview

#quickskip {
  background: transparent url(“logo.jpg”) no-repeat 0px 0px;
  height: 70px;
  width: 390px;
}

Finally we can further improve our HTML document by moving the styles to a separate CSS file. Perfect. Here is the final example. If you have any questions or suggestions concerning our approach, don’t hesitate to leave a comment.

Business Software

September 18, 2005

After reading Garrett Dimon’s excellent article on how to become a freelance web developer, I was wondering which software you use for running your every day business. So I thought it would be great if we could create a representative list of applications.

First of all let me clarify one thing — I am not talking about editors or graphic software such as TextMate, Photoshop, Illustrator etc. — that is definitely another story. What I am talking about is software you use for managing your clients, your time-billing and invoices. Well of course there are some well known pieces of software out there — iBiz, Blinkslale, Merlin and Basecamp —  but sometimes you have to dig a bit deeper for the most sparkling gems…

By the way although I’m primarily interested in software that runs on my Mac, I would also be interested in web based or Windows applications. It would be great if we could get a representative list of applications including a short description and a link to the respective web site. So if you use an application you are quite confident with, make sure you let us know.