Entries Tagged as 'sketches'
How to make a hand-drawn highlighted web page header
For the longest time, I’d been meaning to make my website look more hand-written and to take advantage of Google Web Fonts to make my site feel slightly different. After some design-related nudging from Matt Tanguay, I finally got around to it. Here’s how! =)
For comparison, here’s the “before” picture:
After (I tweaked the links, too):
If you’re already comfortable with HTML and CSS, it turns out to be pretty easy to make a hand-drawn website with highlights that appear when you hover over links. Here’s how!
Step 1: Draw the header image.
It can be more efficient to have one medium-sized image instead of lots of little images, and it’s easier to work with one image instead of many small ones. You’ll use CSS to split this up into rectangular regions later, so keep that in mind when designing your image and try to avoid overlaps.
I drew the main image using Autodesk Sketchbook Pro, but you can use any image-drawing program. You can even draw it on paper and then scan it in.
(I didn’t end up using the Random Page! button, but that’s okay. =) )
Step 2: Add highlights.
I added another layer below my main layer and highlighted whatever I wanted to highlight, making sure things were separated by enough whitespace so that the highlights didn’t overlap into another link’s rectangle. If you’re doing this on paper, you can highlight on paper as well.
You’ll notice that everything is highlighted in this image. No worries! We’ll display just the appropriate part later.
Step 3: Set guidelines.
Setting guidelines using a photo editing tool like the GIMP will make it easier for you to select consistent rectangles. Here, you can see how I’ve set up my guidelines to make it easy to select a rectangle containing the “Home” link. You can use the rectangle selection tool to get the position and size, which you can find in the Tool Options window.
Step 4: Write your HTML and add IDs/classes to it.
Code your HTML so that the text makes sense, and then use CSS to replace the text with images and to lay things out for your intended design.
I added IDs and classes to my links to make it easier to replace the links with images later on.
<ul class="links" style="margin-bottom: 0"> <li><a id="home" class="replace home-design" href="/">Home</a></li> ... </ul>
Step 5: Replace the text with your images using CSS.
There are a number of CSS text->image replacement tutorials out there. The general idea is to use text-indent to hide the text, and then use background, background-position, width, and height to display the right portion of your image.
This is where the guidelines from Step 3 come in handy. Simply make the position negative and use that as the background position, then use the size as the width and height.
.home-design { background: url(images/design.png) 0 0 no-repeat; }
.replace { white-space: nowrap; overflow: hidden; text-indent: 100%; }
#home { width: 96px; height: 40px; background-position: -81px -105px; display: inline-block }
.header .links .replace:hover { background: url(images/design-highlighted.png) 0 0 no-repeat; }
Tada!
Still have questions? Please comment below – I’d be happy to explain more!
Visual book review: The Visual Marketing Revolution (Stephanie Diamond)
Want to make your social media marketing more visual? The Visual Marketing Revolution: 26 Rules to Help Social Media Marketers Connect the Dots by Stephanie Diamond (Que Publishing, 2013) gives you an overview of rules, tools, content, and tactics to help you plan and improve your marketing.
Click on the image to view or download a larger version.
Feel free to share this visual book review! (Creative Commons Attribution – I’d love it if you link back to this site and tell me about it. =) ) It should print out fine on letter-sized paper, too.
Intrigued by the ideas? You can check your local library to see if they have a copy, or buy your own copy below.
| Kindle: |
Paper: |
Disclosure: I received a Kindle copy of this book for review, and I’ll get a small commission if you buy anything from Amazon using the links above.
Other sources of information: books.google.com, visualmarketingrevolution.com
I’ve been working on making my own sites more visual, so I’m looking forward to applying the ideas from this book. If you do as well, please share your stories!
Check out my other visual book reviews
How to Learn Emacs: A Hand-drawn One-pager for Beginners
I thought I’d draw some of the things that people often ask me about or that would help people learn Emacs (and enjoy it). You can click on the image for a larger version that you can scroll through or download. It should print all right on 8.5×11″ paper (landscape) if you want to keep it around as a reminder. Might even work at 11×17″. =)
You can find the image on Imgur and Flickr too.
Feel free to share, reuse, or modify this under the Creative Commons Attribution Licence. Enjoy!
Possibly counterintuitive point: It’s good to learn at least the basics of Vim. Despite the perception of a “Emacs vs. Vi” holy war (one of the classic battles in computer science), it makes sense to know both editors especially if you work with people who use Vi a lot. Know enough Vi to find your way around, and then learn how to customize Emacs to fit you to a tee. That way, you’ll avoid the pressure of not being able to work well with your team or your infrastructure, and you’ll have the space to explore Emacs. =) Emacs is totally awesome.
Need help with Emacs? Feel free to leave a comment or get in touch with me. I’m often in the #emacs channel on irc.freenode.net , and I also occasionally schedule time to help people one-on-one. Also, the Emacs community (mailing lists, newsgroups, IRC channel) can be wonderful, so definitely reach out to them too. =)
Meta discussion: How can I make this even better? What else would you like me to draw a guide for? I’d love to hear your thoughts! Also, thanks to dash, nicferrier, fledermaus, ijp, hypnocat, Fuco, macrobat, taylanub, axrfnu, Sebboh, thorkill, jave_, jrm, and the rest of #emacs for suggestions and feedback!
Update 2013-05-18: Check out the conversations on Hacker News and Reddit!
Thinking about what I want to do and where I want to go with this blog
A friend of mine is a big fan of Firepole Marketing and other blog-related marketing sites, so a lot of his advice for me has been focused on building audiences and information products. It’s been quite useful—look, I finally got around to all these little design tweaks!—but there’s something niggling at the edges of my brain, and that’s usually a sign I should slow down and reflect on it. I notice that I hesitate.
I need to sort out what I’m hesitant about just because it’s unknown or something I’m shy about, and what I’m hesitant about because I want something different.
The things I love the most about this blog are:
- Sharing all these small, varied things I’m learning about, and not worrying about sticking to one topic, making sense, or writing too often
- Having these amazing conversations spanning miles and years (Raymond Zeitler, Clair Ching, Chris League, and a few other people have been commenting for more than five years – I’m so lucky!)
- Bumping into all sorts of amazing people through chance conversations and connections
- Following the thread of our shared curiosity into new questions
- Answering people’s questions with blog posts from when I was trying to figure things out too
- Knowing that no matter what happens, good or bad, it’s something I can learn from and possibly share
There’s a lot of good advice out there for people who want to “monetize their audience” or build a business around blogging, but… maybe I have the space to explore something different. What would this blog look and feel like in another ten years? More of this, I hope, and better. Better at learning, better at sharing, better at organizing, better at connecting.
Sometimes people pay more attention to what they pay for. Hmm, maybe optional payment, or saving payment for individual help? I don’t have a mental hangup about being paid for consulting, because that’s stuff that clearly creates a lot of value for my clients and doesn’t really give me things I can widely share as a way of helping others. I don’t have a hangup about earning a little bit from affiliate sales (since it’s entirely optional, and only the stuff that I like, and I point out non-affiliate links or alternative ways to get things like borrowing books from the library). I’m sort of okay with the idea of making collections of blog posts and sketches and selling them for a nominal fee as an experiment, although I’m tempted to just make them all freely available and then perhaps add a pay-what-you-can system or a donation button.
Anyway, we’re doing well, so I have some space to focus on learning and sharing. =) I want to make the most of that opportunity. Can you help me figure out what would make this better while keeping it real?
Stepping sideways into Alternate Universe Sacha
My parents were having problems with their company’s recent web hosting migration. No e-mail was getting forwarded to the e-mail accounts that they had set up previously, and the two blogs that were separate from the main site didn’t get transferred either. My mom asked me to help restore the blogs. They needed someone to sort out the email and other system administration issues, so I suggested that she find a local system administrator who can also take care of upgrading WordPress and other sites as needed.
I don’t particularly enjoy system administration. I feel terrible when I make a mistake on my own server, and I don’t want to be on the hook for anyone else’s. I’ve done some system administration work as part of web development, since I was usually the person with the most Linux experience in my teams. Setting up is easy, but maintenance could be fiddly, and keeping up with security updates can be no fun. (I’m looking at you, Rails.) Add to that the time zone differences and the inability to just lean over and fix things, and, well…
So I was feeling conflicted and unfilial about wanting to help my mom but not wanting to commit to being the company sysadmin. The problem needed to be fixed, though, and they probably wouldn’t find a good system administrator in time.
As an experiment, I tried imagining an alternate universe in which I would be comfortable making those changes and being The IT Guy (or Gal, in this case). If I lived near my parents, I would help them, of course. I do that for friends and family here. If I had the routines for managing many sites, then it would be easy to maintain another site and another company. I can imagine that for Alternate Universe Sacha, this kind of work might even be easy and enjoyable.
Having imagined this Alternate Universe Sacha, I tried “stepping sideways” into that role. Sure, I was half a world away, but I could mentally move the house to my hometown. Time zone differences and distance can make it difficult to communicate because it’s hard to tell how busy someone is and when you get the information you need, but it actually worked out well because I worked on it in the evening while people were at work back home. If I stopped worrying about the possibilities of messing things up worse and instead took the same methodical approach that I would use if I had a lot of experience in this (and I guess I do, compared to many people), then it would actually be pretty straightforward. Besides, I reassured myself, everything will turn out all right. Even if I messed things up, family’s still family. For gaining experience, it’s hard to find a more forgiving client.
It turned out to be straightforward, although it did involve a lot of clicking around. E-mail works again, and the blogs are both back up. Not only that, I now have an alternate universe Sacha whom I can think of myself as if I need to do more system administration work. I’m using that idea to make it easier for me set up proper maintenance for my personal sites as well. If I was an experienced and constantly improving system administrator who enjoyed doing this, how would I do this? It’s no substitute for actual experience–I’ll still miss things people learned the hard way–but it helps me reach that point of learning what I need to learn the hard way.
I wonder what alternate universe selves I might play with in the future. Do you use any?
