01
Jul
2008
I used to take screenshots of websites with Print Screen and then in Photoshop crop the part that I wanted to keep, but I always figured that there had to be a better way. So after I installed Firefox 3 I went looking for good extensions and I came upon Screengrab! created by Andy Mutton. This excellent Firefox extension lets you take a screenshot of a selected portion of the page, what is visible on the screen, or the whole page scrolled down all the way to the bottom. This last option is fantastic when you need a screenshot of the entire page, which might be several screenfuls all the way to the footer, and there is no cutting and pasting involved. The extension automatically removes all of the browser chrome from the image so you will not see the navigation bar and tabs at the top or the scrollbar to the right. You have the option of either saving the screenshots as PNG or JPG images, or copy the image to the Clipboard so that you can paste it in your favorite image editing application.
I often want my screen shots to be really neat so I go above what Screengrab! is capable of. The resolution of my laptop screen is 1680×1050 pixels and when I take a screenshot of the visible area of the screen with Screengrab! the end result is 1663×893, which, to be perfectly honest, bugs me; I like my numbers to be even. So I have created a standard size that I use for my screenshots: 1200×800. However, you cannot just crop the image from 1663×893 to 1200×800 or you will lose information on fluid-width websites, and you have to take into consideration if the design is left-aligned, centered, or right-aligned. So what I did was to create a few bookmarklets that resize my browser window so that the screenshot will automatically be 1200×800 in size. The code that I use is: javascript:window.resizeTo(1233,943); but if you want to use it you will have to adapt it to your browser since there is a small variation between operating systems, and the look and feel of the Firefox browser can be changed with customization.
The first step is to create the bookmarklet, and you do this is by creating a bookmark, but instead of a website link you add the code from above. The simplest way to personalize this code to your browser is by running my code and taking a screenshot with Screengrab!. Then you investigate the file dimensions; e.g. if you were to get 1205×770 you would change the code to: javascript:window.resizeTo(1228,973); (i.e. subtract 5 from the first number and add 30 to the second number). However, there are some variations depending if the website is taller than the screen, which makes the scrollbar pop up, or if you only have one tab open, which leads to no tab bar appearing at all, so it might be a good idea to create a few different bookmarklets for the different cases. Furthermore, you might prefer a different size for your screenshots, so please make changes to the code so that you get your preferred size. Of course you can still take screenshots of the complete page, in these cases you will get a predetermined width but the height will be decided by the web page content.
28
Jun
2008
Jacob Gube from Six Revisions recently wrote an article called 25 Outstanding WordPress Designs that featured 25 handpicked WordPress blog designs. I was honored that my blog was picked and included in this great company; two of my personal favorites from this list are ISO50 (check out the beautiful prints) and coda.coza. If you are not familiar with Six Revisions you should really give it a read. It is one of a handful of web development/design sites that I frequently visit to find out about new techniques and to be inspired. Here are a couple of great articles to get you started: 30 Exceptional CSS Techniques and Examples and 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension.
15
Jun
2008
June 17th is a day I have looked forward to for a while now, it is the day when the new Firefox 3 web browser from Mozilla will be released, and also the day when I will start using Firefox 3 as my primary browser. The launch is going to be really big, in fact, it is going to be record-breaking. Mozilla will be trying to break the world record for most software downloads in 24 hours. So if you are interested in participating pledge now and remember to download Firefox on Tuesday! I will probably be writing about my experiences with the new browser, so stay tuned.
02
Jun
2008
Being a graphic designer I have always been drawn to t-shirts, and one of the best places for finding great t-shirts at an affordable price is Threadless. But the best feature of Threadless is that it is community-driven, all the t-shirt designs are created by regular users and voted on by others, then some of the best submissions are picked by the Threadless staff and printed, and the winners get handsomely rewarded. I submitted a design three years ago myself, but that did not go too well. I probably own two dozen t-shirts from Threadless, I usually stock up when they have one of their occasional sales with t-shirt prices starting at $10. Here is a list of my ten favorite designs from Threadless, sadly many cool t-shirts sell out pretty quickly, but there is always the opportunity to request a reprint.
31
May
2008
At first thought it might seem like a strange concept to name galleries that showcase exceptional website designs after a computer style sheet language, but once you understand how CSS (Cascading Style Sheets) revolutionized website design it makes perfect sense. CSS has simplified the creation of great and consistent-looking websites by separating the content from the way it is presented. CSS galleries are awesome sources for inspiration when creating a new website or blog, and if you make it a habit to follow the featured websites in the CSS galleries you can easily spot new trends, and maybe even tell what the next big thing is.
26
May
2008
Here’s tutorial with a few steps on how to create the denim texture that you would find on your favorite pair of jeans. The tutorial was created using Photoshop CS3 but I would guess that older versions of Photoshop can be used. Since some of the filters I used are of a random nature, you might have to adjust the settings somewhat to get the desired result. Furthermore, if you prefer darker or lighter denim or want your denim saturated with blue you might want to make changes to the Gradient Map. The font used in the above image is Kingthings Xstitch.
10
May
2008
I have been a big fan of Smashing Magazine ever since I discovered the website a year ago, for that reason I was really surprised to notice that my little blog was featured in one of their articles; and I have not even promoted my website. The article in question is titled Now More Than Ever: 50 More Excellent Blog Designs and it features, you guessed it, fifty awesome blog designs from all over the web. These blog designs were chosen because they clearly reflect the personalities of the designers. I am really honored to be included among all the great work; it gives me confidence to maybe even participate in Smashing Magazine’s monthly Desktop Wallpaper Calendar features.
05
May
2008
I am an avid reader of books and if I kept all the books I read my bookshelves would be overflowing. But I have found a simple solution to this problem: internet book trading websites. You can easily get rid of books you no longer wish to keep while at the same time receive books that you have not yet read. Your only cost is the price of postage when you send away your books. What these sites have in common is that you set up an inventory where you list all of books that you want to give away, and when a book is requested you get one credit that you can use towards books that you have on your wish list. I am a member of two book swapping sites that slightly differ how they operate: BookMooch.com and PaperbackSwap.com.
28
Apr
2008
Here is a selection of ten podcasts that I like to listen to or watch during the week. I do not personally use Apple’s iTunes for downloading podcasts since it is such a hassle to use; instead I opt for subscribing to the podcasts’ RSS feeds. I have found the two best producers of podcasts to be Revision3 (video podcasts) and Leo Laporte’s TWiT (audio podcasts).
21
Apr
2008
I had been waiting for a while for WordPress 2.5 to be released so that I could finally start blogging. I figured that I might as well wait for the long-awaited new version of the content management system before I started coding, in case it was a major upgrade so that I would not have to rewrite any code. WordPress 2.5 was released on March 29th, and ever since I have been (slowly) working on my blog. My previous website was all hand-coded and did not use any content management system which made it hard to update. The advantages of using a blogging system like WordPress is that it makes it really easy to add new posts, change the design with templates, add tagging, search posts, and let readers post comments.
The blog is still pretty basic. I will refine the design and add extra functions the following weeks. What I will be looking into is sIFR for the headlines, something like Lightbox for bigger images, cleaning up the forms, and adding some content to the sidebar. I am also interested in learning jQuery for all my JavaScript needs. So please stick with me, and I will try to find interesting topics to write about.
