Fixing Photoshop's Shape Tool

Posted By: Mark Aplet 7 Comments November 11, 2010

Have you ever used the vector shape tools only to discover that the edges can sometimes look aliased? To make matters worse, sometimes you could draw a shape and it would turn out nice. Sometimes it looks like poop. The tool is so inconsistent and frustrating that I actually recommended that interface designers stop using the tool all together.

The problem with these tools are that the default (horrible default) behavior for the tool is to use a sub-pixel placement on the screen. What I mean by "sub-pixel" is that drawing a vector shape can actually split a pixel in half. When the pixel becomes split like that then it has to alias the shape in order to compensate for the split pixel. Contrast that to a marquee tool. When a marquee tool draws a shape it snaps to the nearest full pixel creating sharp edges that appear crisp and clean. Lets take a look at what this looks like.

The fix for this shortcoming is pretty easy. Although it may be a bit hidden. With the shape tool active (U) select the rectangle or rounded rectangle shape tool, then look towards the end of shape options there is a disclosure triangle. If you click on it, you will be shown options available for that tool. For each of those tools there is a checkbox that reads "Snap to Pixels" checking that box will allow the vector shapes to snap to the nearest whole pixel curing the sub-pixel display issues. In the photo above. The right shape was drawn with Snap to Pixels box checked, while the left shape was not checkeded. What a difference it makes. Why dosen't Adobe make that the default for the tool?

Respond NowTags: Photoshop

Facebook LikeMe Plugin

Posted By: Mark Aplet 4 Comments September 14, 2010

The likeMe plugin adds the facebook Like or Recommended buttons to your posts footer. The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

Okay, So I am must admit I am not a big Facebook fan. In fact, I deleted my facebook account and haven't looked back. But that does not mean other people don't use. In fact the only reason I wrote this plugin was because my co-worker who's in charge of or companies marketing asked me too.

I was not the first to release a Facebook like button plugin for Mango Blog. Pyae Phyoe Shein actually announced his plugin about the same time I finished mine up. No I didn't rip him off, it was just a coincidence.

The LikeMe plugin follows the same configuration convention as the Facebook developers like button configuration wizard. So if your used to the wizard then this plugin functions very similarly.

Download and Installation

Plugin version:
1.0
Last Updated:
September 16, 2010
Requires:
Mango Blog 1.3+
Auto-install URL:
http://www.visual28.com/assets/content/mango/LikeMe_1.0.zip

Respond NowTags: Mango Blog · Plugins

Showcase of Beautifully Designed Mystery Meat Navigation

Posted By: Mark Aplet No Comments September 10, 2010

I was looking at one of those design showcase sites today, and was surprised to see such a strong resurgence in mystery meat navigation. So I thought I would throw out my own showcase of beautifully designed websites with mystery meat navigation.

Bert Timmermans

Cavica

Got Milk?

Hull Digital – (recently updated to include text)

Harry Ford

Square Girl

The Box

Respond NowTags: General · Inspiration · usability

LESS/SCSS Syntax Highlighting in Dreamweaver

Posted By: Mark Aplet 16 Comments August 17, 2010

I started using less css a short while ago and really like having variables and nesting options for css.  The only real downside was Dreamweaver's inability to apply syntax highlighting to files it does not understand. Thankfully the solution is pretty easy and takes only a few seconds.

NOTE: This technique modifies the core configuration files used by Dreamweaver so be sure to make a copy of the file and store it in a safe place until your certain things are working correctly.

We will be modifying the document called MMDocumentTypes.xml located here:
Macintosh HD/Applications/Adobe Dreamweaver CS?/configuration/DocumentTypes/MMDocumentTypes.xml

Windows users, the configuration file is called the same thing, and is located here:
C:\Program Files\Adobe\Dreamweaver CS?\Configuration\DocumentTypes\MMDocumentTypes.xml

Edit the file in a plain text editor. You can use Dreamweaver if you like. You will need to restart Dreamweaver before the changes take effect.

Do a find for "CSS" and modify the either macfileextension="css" and/or winfileextension="css" to include the less file extension. it should look like macfileextension="css,less" when your done.

Also note. If you use Sass you can also add in the scss extension and use the longer scss notations, but the shorter sass extension offers no syntax highlighting since it does not contain the curly braces like css does.

Now save the file and restart Dreamweaver and open your less file and you will see all the syntax highlighting just as you would with traditional css.

Respond NowTags: CSS · Software

Mango Blog FormRemember Plugin Fixed

Posted By: Mark Aplet 1 Comment July 13, 2010

Something that has bothered me for a long time is the display code of the FormRemember plugin. The issue for me is that the display code has used extraneous break tags, both before and after the plugin, causing it to have odd spacing issues with other form elements. It also wraps the label around the input instead of attaching it with a for="comment_rememberme".

For years now, I have manually fixed the plugin install after install. I guess I was hoping that this would get fixed in one of the releases since 2008. But after several updates and no fix I guess it's time for me to step up to the plate and just offer up a plugin update of my own.

So finally, here is the unofficial plugin update that addresses these issues until such time that this can be intigrated into the mangoblog core.

Plugin Info & Download

Plugin version:
1.2
Last Updated:
July 12, 2010
Requires:
Mango Blog 0.2+
Auto-install URL:
http://www.visual28.com/assets/content/mango/formRememberer_1.2.zip

Respond NowTags: Mango Blog · Plugins

Theme Design By Mark Aplet

Super Powered by Mango Blog