Tutorial: How to wrap text around an image in Photoshop (Video)
Wrapping text around objects
I just recorded a quick screencast video tutorial for a colleague on how to use paths or shapes to wrap text to avoid objects or circumscribe shapes (circles, etc.) using Photoshop. This is something more often done in Illustrator, but PS does the job pretty well too.
When mocking up websites in Photoshop, this is a great way to illustrate how text will flow around an inline image.
(Click here to watch. 1 min 35 sec)
Help for “bablooO” hacked / attacked WordPress Sites
Hopefully, this information will be of use to some people out there who are unlucky enough to be hit by the “bablooO” wordpress security exploit. I believe this hack can impact anyone using WordPress version 2.8.0 and earlier. See this recent advisory, which I believe is related.
If you do a ‘view source’ on your WordPress blog and you see a bunch of spammy links beginning with the comment code:
<!-- bablooO-start -->
…then here are some tips for how to recover from this problem:
- Make sure your theme is okay. If you have a backup of your theme, restore your theme from backup as your theme files themselves may have been molested. In this particular exploit, footer.php may have been rewritten.
- Don’t trust your WordPress installation. The actual core files may include injection code / backdoors. (wp-blog-header.php for example may have an obfuscated ob_start();eval(base64_decode()) call in it. The safest thing to do is:
- backup your wp-content directory and your WordPress database
- wipe out your entire installation
- reinstall the latest version WordPress from scratch
- restore your wp-content directory and database, and then examine both for any suspicious content. Here are some critical tips on how to search your wp-content directory for “backdoors”.
- Make sure your database is okay (posts/pages). One tip I read about here is to use the export function (under the WordPress admin Tools menu) to save a giant XML file of all your posts/pages/comments to disk, and then you can use a text editor to search for strings like ‘viagra’ and ‘casino’ — two words which probably do not appear on your own blog, but are very likely to appear in the hidden content of these spammy links. You will have to fix these by hand.
- Password-protect your admin directory using the .htaccess method to protect yourself from similar future exploits.
Related discussions:
http://ckon.wordpress.com/2009/06/05/bablooo-spammer-attack-on-several-wp-blogs/
http://wordpress.org/support/topic/280748
http://milw0rm.com/exploits/9110
How to remove ‘Web Hosting Provided by Bluehost.com’ WordPress footer
The Culprit
Recently bluehost made an update to their “SimpleScripts” installer so that when you install WordPress, no matter what theme you’re using, your site gets a “Web Hosting Provided by Bluehost.com” footer advertisement.
This can be pretty aggravating at first, especially since it seems like the only way to remove the promotional message is by commenting out the wp_footer() call in your theme. (Bad idea, will break some plugins.)
Fortunately, the fix is pretty easy once you know where to look:
- Go into your WordPress admin page
- Click plugins from the sidebar
- Deactivate “SimpleScripts Footer“
Shame on BlueHost for (a) forcing its clients to switch to SimpleScripts by not providing WP updates via Fantastico anymore, and (b) automatically installing and activating a plugin that ads a promotional message on the websites of paying customers.
Using free WordPress templates for fast & affordable redesigns
Here are two beautiful, highly functional, self-editable websites that were launched on shoestring budgets by making good use of off-the-shelf WordPress templates:
Deva Foundation
www.deva.org
I started off with this freely available WP theme. Then my client found a nice stock image of clouds on iStockPhoto.com that I converted into an ephemeral background. Finally, I popped in a new header graphic, improved the font styling (and IE compatibility) and integrated iContact for email newsletter signups and and PayPal for ecommerce.
Ta-da! Deva Foundation’s brand new site was completed in less than 20 hours, from concept to completion.
Maria Benitez
www.MariaBenitez.com
This website for the legendary Santa Fe flamenco dancer Maria Benitez was completed in even less time by taking advantage of the excellent — and freely available – “Yoghourt” WordPress theme.
Strip www off URLs at GoDaddy using .htaccess mod_rewrite
Here’s how to remove the www. from your domain name so that Google won’t “split” your pagerank as a result of some inbound links going to www.foo.com and others going to foo.com. (Google will see this as two separate sites.) This tip is tuned to work at GoDaddy, where using mod_rewrite can be a real pain because GoDaddy has some unfortunate default Apache settings that prevent ordinary rewrites from working properly out-of-the-box.
Add these lines to the top of your .htaccess file:
# Override GoDaddy defaults that inhibit URL rewriting
Options -MultiViews
rewriteEngine On
# Rewrite URLs to remove www from domain name
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
“Narrowing down your design preferences”
CSS Zen Garden
Sometimes a tricky process during a website design or redesign project is to figure out what kind of a general look and feel the client wants for the new site. Asking a client to “just go find some sites you like and send me the links” is a bit like asking “just go find some stars in the sky you like and point them out to me.”
Introducing an old favorite of mine: CSS Zen Garden. It’s great when a client can visit this site and send back links to two or three designs that feel right for the project we’re working on together. The CSS Zen Garden is also a superb place to demonstrate how form and content can be separated from one another. A properly built website will have the ability to change form at a later date with a minimum penalty, i.e. having to rebuild content.
Flash Site for GCI
Working from Illustrator mockups (graphic design by avantgarde) this 100% Flash site was built with gorgeous full-screen portfolios, custom text and photo scrolling classes and efficient loading / pre-loading behaviors.
www.gci-sf.com
GCI is a succesful San Francisco based commercial contracting / construction management firm.
“What makes a great newsletter?”
Click to see the whole newsletter
Here’s an example of a really super email newsletter. Even if you’re not a Yogi, it should be clear that this newsletter offers real value to its readers.
Here’s what makes it so great:
- It’s not too long: You don’t have to set aside a special time in the day to read the whole thing. It’s distraction friendly.
- The marketing ‘call-to-action‘ — the teaching schedule — is nicely separated out in the sidebar and highly visible, and it doesn’t overwhelm the newsletter with self-promotional material.
- The introduction is personal and friendly and is relevant to the intended audience.
- The cooking recipe at the bottom gives the newsletter real value. This is giving something away for free, and it’s a great incentive to keep visitors subscribed to the newsletter.
- The overall layout is easy on the eyes, and has a good balance of text to images.
Prototyping for PayPal
I really enjoy doing rapid prototyping, and from a business perspective there’s no better way to figure out how to bring a new product to market. This month, AnswerLab (San Francisco) hired me to produce web prototypes to test a new financial product for PayPal.
Here’s how this type of study works:
- Figure out what different messages or images you think might help to sell your product
- Produce a prototype (fake) website that simulates purchasing that product, with variations for each message or image you want to test
- Send users to test out each variant of the website
- Conduct statistical analysis of users’ browsing behaviors to figure out which variation produced the best results
“Agile design and just getting it out there”
This morning, a friend and client of mine emailed me regarding the work we’re doing to get his new website built:
I interest myself in how the structure of our site will influence our behavior … As the website design develops, so does my clarity. It’s obvious to me that “site review and evaluation” will be an opportunity for us to reflect on our goals … I mean that the site is, for me, kind of like a biofeedback device that informs me about myself and helps me develop my goals. At least that’s how it feels at this stage in the process.
This is a great reflection on how the actual process of making a website helps to make more concrete the actual project or work that the website is supposed to communicate. This kind of thinking caused a seismic shift in the philosophy of webdesign and web programming a couple of years ago. It’s called “agile design” and I think it’s fascinating.
The basic idea behind agile design is that you minimize the amount of forethought and planning on paper, and instead take advantage of technologies that let you easily update the website once someone has actually clicked through the Real Thing.
Before agile development we said to our clients: “Get it right on paper, or else we’ll bill you astronomical fees for change-orders.” Now we say: “Let’s just get the basic sketch online, play with it, and then keep tweaking things until it feels right.”
This is one of the reasons I build a lot of sites for my clients using WordPress. It means that we can change our minds about lots of things — even the fundamental look and feel — without having to build everything over again from scratch.
Being With Dying
Today we launched this simple elegant website to promote Upaya’s enormously important “Being With Dying” training program:
www.BeingWithDying.org
“The professional Training Program in Contemplative End-of-Life Care has long been dedicated to fostering a revolution in care of the dying. This unique program provides clinicians with essential tools for taking care of dying people with skill and compassion, as well as sustaining resilience and dedication as they serve others.”
Ottmar Liebert’s Redesign
The last time I did a complete redesign for platinum-selling flamenco guitarist Ottmar Liebert was in 1995. By 2008, he was ready for something new and fresh, something that pushed the envelope while staying rooted with his zen-sensibility for elegant, clean, functional design.
The jewel of this redesign is a environmentally sensitive home page which, if left alone for 10 minutes, gets devoured by weeds, vines, bugs…
This fairly huge project included:
- SEO-friendly flash
- A wordpress diary that goes back 12 years
- A record label
- An MP3 downloads shopping cart.
http://ottmarliebert.com
Wedding Photography Blog Redesign
http://henshallphoto.com
This was a super-basic blog redesign for a friend and former colleague of mine. The assignment was to create a look and feel that kept his existing branding requirements (color pallette, logo) while making a new frame for his blog that would provide an elegant relief for large animated photo slideshows and sparse text.
Beauty Through Balance
www.BeautyThroughBalance.com was designed and built for Shannon Plummer, the sole proprietor of a holistic health and beauty business in Santa Fe. Her new site was built using WordPress so that Shannon could easily update the site on her own. For example, she uses WordPress to add the health tip of the month. Visitors and customers can sign up for Shannon’s mailing list which automatically emails the content each tip of the month as it’s published.
http://beautythroughbalance.com
“I had the most wonderful experience working with Canton. He made designing my website fun and very easy. From our very first meeting, the entire process was quick, and understandable. During our work together, he taught me how to manage my website on my own which is so important for my small business.
Canton is such a great mix of many different qualities; he’s very technical, a great designer, easy to talk with and a wonderful teacher of his craft. I highly recommend his expertise to anyone!”
– Shannon Plummer, DOM
Redesign for The Greenlining Institute
greenlining.org
I’m very pleased to announce the redesign and redeployment of greenlining.org.
Associate Director Orson Aguilar at Greenlining hired me to make a brand new website, following a look and feel sketched out by their designer. They needed a customized content management system that would make it easy for them to update their news, videos, publications, and policy initiatives. Everything needed to be database-driven, from the home page to the staff list to the news area.
Highlights
- Videos are automatically embedded and synchronized with content uploaded to YouTube™
- Images and all other content on the website can be edited using a web browser. No need to photoshop images to scale or crop them, no need to create PDF previews. It’s all done on the fly.
- PDFs, videos, and news articles are all tagged with the policy initiatives they relate to, so the policy pages stay fresh and up-to date whenever new content is added.
- Seamless integration with PHPList for the ability to send email newsletters to 1000′s of subscribers.
About the Client
The Greenlining Institute’s mission is to empower communities of color and other disadvantaged groups through multi-ethnic economic and leadership development, civil rights and anti-redlining activities. They’ve made financial institutions like the Bank of America and Wells Fargo commit to investing over $900 billion (over 10 years) to help the communities they serve.
« Previous Page — Next Page »