POSTS IN Tips & Tools

Reviews and lists of helpful resources we come across.

Getting Over Terminal-phobia

By on July 31st, 2012

Terminal is probably the scariest interface I have ever used. Its intense display looks heavy duty, only usable by super-geniuses and hard core programmers like Mark Zuckerberg. It also reminds me of the computer system from the old movie War Games.

War Games

In the movie the two kids almost cause this:

War Games

a scenario where the US thinks Russia is getting into position to start a nuclear war because the kids are playing around on this terminal like computer, hence my obvious and completely reasonable association of terminal with World War III.

However, when used correctly terminal can make life a lot easier. Thanks to Zack, who’s in charge of System Admin & Operations  here at Barrel, I have learned some pretty nifty short cuts and commands, so rather than feeling like I am about to blow-up the world, I just get to feel insanely smart.

First things first. Change the color (my preference is ocean, which I find helps soothe the WWIII atmosphere, but grass isn’t so bad either).

Next, actually entering info into terminal. The language of terminal sounds like absolute gibberish at first. Chmod, chown, mkdir, rm, sudo–they also sound like complete nonsense, until you realize everything is just an abbreviation and an elimination of as many vowels as possible (mkdir= make directory, chown=change owner, cd= change directory, etc.). This realization was the first step in discovering terminal isn’t so bad afterall.

The first thing I learned was how to chmod things (a.k.a change the permissions of files). The perfect starter command because its really hard to crash a system when using chmod. Chmod is especially helpful when you want to change the permission in all files in a folder.

First you navigate through the folders til you find the one you want to chmod. For me all my files start out in a folder called Sites so I simply enter in ~/Sites/the_name_of_the_grandparent_folder/the_name_of_the_parent_folder. A quick and easy shortcut is hitting tab, which completes the file name for you (e.g. if I typed in the_name and hit tab it would auto complete to the_name_of_the_parent_folder). If you hit tab and nothing happens, hit it twice and the possibilities of the auto complete will be displayed. Once you have found the folder you are looking for you type in the command chmod -R 755 the_name_of_the folder. The -R means it will recursively apply the permissions (e.g 755) to everything in the folder.

Another useful thing Zack taught me was how to set up a new website on our server. The most important commands from this are:

  • mkdir directory name (which makes a directory)
  • cd (which moves you in and out of the directory, / to go in further and .. to go out of the current folder)
  • tar -czvf filenameOfNewFile.tar.gz filename_you_want_to_tar (to make a zip file)
  • tar -xzvf filename.tar.gz –strip 1(which unzips it and removes the previous initial path)
  • find -name ._\* |xargs sudo rm -v  (which gets rid of the ._ in front of file names when the file unzips weirdly)**Here I would just like to point out comes another useful trick piping. The | takes everything found in the search (which in this case was all of the files with ._  in front) and “pipes” it into the command sudo rm -v (super user do remove)
  • mysql commands on making a database:(for this example the database name is sandwich_db with user peanut_butter and password jelly, and the hostname is yummy)
  1. mysql > create database sandwich_db; (which creates the database)
  2. mysql > create user ‘peanut_butter’@'yummy’ identified by ‘jelly’; (which creates a user);
  3. mysql > grant all on sandwich_db.* to ‘peanut_butter’@'yummy’ identified by ‘jelly’; (which grants the user access to the database you have just created)**DON’T forget the apostrophe around the username and password and hostname and the semi colons at the end of the commands!
  • If you want to transfer a database and put it in the new database
  1. dump the database into a sql file
  2. find and replace the old siteurl with the new one
  3. enter the command: mysql -u peanut_butter -p sandwich_db < sql_db_file_you_just_made.sql

These little nuggets helped to turn terminal from this

scary comp

to this

friendly comp

Illustrator Tips From Andrea

By on July 30th, 2012

I wrote about transitioning from PC to Mac earlier this summer, but I haven’t really talked about another technical challenge I had: getting comfortable with Adobe Illustrator CS5.

It’s not that I haven’t worked with Illustrator before Barrel. I have used it to design vector illustrations and logos, but I normally work in Photoshop for everything else – web layouts, print designs, graphic images. In my first week, I didn’t know my way around Illustrator well enough to really get “in the zone.” I spent more trying to figure out how to achieve an effect (especially those I could have done in Photoshop in 2 seconds flat) than concentrating on the actual design problem at hand.

Luckily, Barrel has an Illustrator genius on board. Say hello to Andrea.

Andrea Horne, Barrel Designer and Illustrator

I must have asked her a million questions since I started my internship. She walked me through her favorite tools and processes, giving me a ton of “I-can’t-believe-I-didn’t-know-that;I-could-have-saved-so-much-time” moments. Since Photoshop is still more popular than Illustrator (for now), I thought I’d share some tips you may not have known about.

Note: I learned a lot from all of the other Barrel designers too! I just asked Andrea the most questions.

1. Shape Builder Tool

Shape Builder is right between Free Transform and Perspective Grid.

Since there’s nothing similar to the Shape Builder Tool in Photoshop and I’m not the type to experiment with different, strange tools (even though I should), I probably wouldn’t have come across the Shape Builder Tool on my own.

This tool is a lifesaver. It helps you combine or punch out areas of multiple selected shapes, allowing you to work in the way you would if you were cutting and pasting paper together.

Combining shapes is really easy:

  1. Select all the shapes you want to combine
  2. With Shape Builder selected, click and drag to combine every shape that the drag line touches.

Quickly combine shapes without touching the Pathfinder toolbox.

Shape Builder also helps you cut parts out of another shape:

  1. Select all the shapes involved.
  2. With Shape Builder selected, press down option and click into the area you want to punch out.

You could achieve the same effects by using the buttons in the Pathfinder panel, but those aren’t as easy and intuitive to use. It’s hard to remember which button does what, and using it seems to be a case of trial and error (for me, at least). The Shape Builder Tool eliminates the guesswork, so I can get on with designing without googling how to use the Pathfinder panel tools.

2. Offset Path

Back in the old days (two months ago), if I wanted to make an outline of a shape, I would do the following:

  1. Copy and paste the shape.
  2. Transform one shape so it’s slightly smaller or bigger.
  3. Make sure the bigger object is below the smaller one.
  4. Use the align panel to center both shapes vertically and horizontally.

Unfortunately, this doesn’t always work perfectly. The edges of the new shape aren’t equal distance from the edges of the original shape.

Some outlines don't turn out to be equal distance from the edge of the original shape.

Andrea introduced me to Offset Path (from the menu, Object > Path > Offset Path). With an object selected, open the Offset Path dialog and adjust the settings to your preference.

This would create an outline 10px away of the object.

Here’s the breakdown:

Offset: The distance between the outline and the original shape. A positive number moves the outline away and outside of the shape; a negative number creates an outline inside of the shape.

Joins: I usually keep it at Miter, which makes the outline identical to your original shape. You can also use Round for rounded corners and Bevel for beveled corners.

Miter Limit: The miter limit specifies how far the points can extrude from angles in the shape. I usually leave this alone.

Also, check Preview to see the results before you press “OK”.

Using Offset Path, I can achieve the effect I wanted in just one step. Here are the results:

All the lines are equal distance from every point on the original shape.

3. Copy, Place, and Duplicate

This process doesn’t fit neatly into one label, but I’ve used it so many times that I can’t imagine how I’ve ever gotten things done without it. It makes use of three keyboard shortcuts, used in this order:

  1. Copy - Cmd + C
  2. Paste in Place - Cmd + F (This pastes a copy right on top of the original object)
  3. Duplicate Transformation - Cmd + D

Duplicate Transformation repeats the last transformation you’ve made to the object, which include moving, resizing, and rotating a shape.

To show you how this process works, I’ll walk you through positioning lines perfectly around a circle like this:

First, draw a circle to use as a guide. Then, using the line tool, make a line with a stroke of 1px. Center it vertically to the circle using the align panel, and position the line so that it’s touching the circle.

If you don't see the Align panel, make sure it's checked under Windows in the menu.

It should look like this:

Select both the line and the circle. With the rotate tool selected, hold down option and click into the very center of the circle (this should be marked with a tiny square when the circle is selected). A rotate dialog box should pop up. Set the angle to 10°, and press “Copy” instead of “OK”.

You should have something that looks like this.

You won’t need the circles anymore, so delete both of them. Here is where the shortcut process comes in. Select the slightly rotated line to on the left. Copy it (Cmd + C), paste it in place (Cmd + F), and duplicate the rotation (Cmd + D). Keep doing this until the shapes go completely around in a circle.

Keep duplicating until you get a circle of lines.

Using this series of shortcut saves time and reduces redundancy (Pressing the three keys is a lot easier than going back into the rotate dialog box every time).

4. Rounded Corners

Rounded corners are easy to make, but they’re not the easiest to transform, even in Photoshop. However, there are two ways to create and scale rounded corners gracefully.

If you’re interested in making a rounded rectangle, you can use the Rounded Rectangle Tool. Select the tool and start dragging on the canvas to make a shape. You can also click anywhere on the canvas to open a dialog box, which allows you to specify the size of your shape and how round you want the corners to be.

Scaling these are a little tricky, however. You’ll notice that transforming the shape using either the Selection Tool (black arrow) or the Free Transform tool will skew the corners, making them look disfigured and ugly.

Nobody likes ugly rounded corners.

To work around this, use the Direct Selection Tool (white arrow) instead. Select all the points of the shape on one side (left/right to make the shape wider, or top/bottom to make the shape longer). Those points should be black instead of white when they are selected.

Holding down shift, drag these points to the desired width. Your shape will transform, but the corners will stay exactly the same.

Alternatively, you could draw a regular rectangle (or any other shape) and use the Round Corner Effect. With your object selected, go to Effects > Stylize > Round Corners to open the dialog box. 

The rounded corner dialog box applies a scalable rounded corner effects.

With the rounded corner effect, you can scale the object using any transform tool (Selection, Direct Selection, Free Transform) without skewing the corners.

You can also change the corner radius any time by double-clicking “Round Corners” in the Appearance Panel (this brings up the same Round Corners dialog box). You can also delete the Round Corners effect from here (drag it to the trash can icon), or apply other effects using the “fx” icon on the bottom of the panel.

Note: If you don’t see the Appearance Panel, make sure there’s a check mark next to it under Windows in the menu.

5. Blend

Jan and I sat through an informal Illustrator tutorial from Andrea, and one of the things that wowed us was Blend. Blend creates steps between selected objects, sort of like a gradient. However, the tool takes into account the shape and stroke size of the selected objects instead of just color.

To open the dialog, go to Object > Blend > Blend Options from the menu. Or double click the blend tool in the toolbox.

There are three spacing options:

Smooth Color: This creates a smooth color gradient between two objects. If the two objects are the same color, it creates just one step in between the two shapes.

Specified Distance: This creates paths between the two objects that are the specified distance apart from each other.

Specified Steps: This makes the specified number of steps between the two objects.

These can be hard to visualize without actual graphics, so here are some examples of how blend works with circles:

Blending with objects of the same color.

Blending both colors and shapes.

Blend can do a lot of other cool effects, and it’s incredibly useful.

With Andrea’s (and everybody else’s) help, I’ve learned a lot about Illustrator, from how to properly align things to working with artboards.

After getting used to Illustrator, I’ve realized that it’s so much faster and more efficient than Photoshop. I’m not completely sold on Macs, but Illustrator has definitely won me over.

More resources:

Blend Tool: A Comprehensive Guide
Creating Shapes with Shape Builder Tool

2 Comments

Five Useful Bookmarklets and Plugins

By on July 18th, 2012

I’m always looking for inspiration, checking my development work, and taking screenshots for projects I’m working on in Chrome/Safari. To streamline my workflow and learn more about my craft, I use a certain set on bookmarklets, plugins and add-ons. Here are five very useful plugins for web designers and developers:

1. Firebug

Firebug is a plugin that lets developers inspect the DOM and associated styles.

Most developers probably already know about Firebug. This incredibly useful plugin lets developers inspect HTML elements and their corresponding CSS styles to debug code, or to find out how other websites have achieved a certain effect. Firebug also allows users to modify both the HTML and CSS in real time to see how changes will affect the web page.

Firebug CSS metrics at work.

Aside from that, hovering over an element in Firebug shows CSS metrics: the padding, margins, width and height of elements come up as colored blocks. This is a great way to find out why there’s weird spacing or why elements aren’t lining up correctly when coding out a webpage.

Firebug also includes other features aside from viewing and editing code:

This extension is mostly for Firefox users; Chrome already has a built in debugging function.

2. ColorZilla

ColorZilla lets you pick colors from any webpage.

An obsession with colors come with the territory of being a designer. ColorZilla allows designers to pick out colors directly from the webpage and copy the hexadecimal color code to use in their own projects or to make a color palette. This plugin is also helpful for developers who need to copy color codes from one part of a website, in order to use it on another element.

ColorZilla is more robust in Firefox than in Chrome, however. In Firefox, the color picker is easier and quicker to use – there are less clicks required in order to pick a color.

Firefox's ColorZilla add-on has a lot more packaged in than Chrome's plugin.

In Chrome, users would have to open the ColorZilla widget, click “Pick color from webpage,” choose a color, open the widget up again, choose the last color picked, and finally copy the code. In FireFox,users just click the ColorZilla icon, pick a color, and the color code is automatically copied to the clipboard. Firefox’s ColorZilla add-on also gives us access to RGB values, X/Y coordinates, position in the DOM, CMYK values, gradient generators, and copy/paste CSS codes.

3. MeasureIt!

Get the height and width using MeasureIt!

MeasureIt is a ruler extension used to measure elements in your browser; it’s available for Chrome, Firefox and Safari. Meant for web designers and developers, this tool measures areas of a page by its width and height in pixels.

Measure also serves as a straightedge to see whether elements of a page line up exactly. You won’t need to hold a book up to the screen anymore, Taylor!

4. Aviary Screen Capture

Capture a screenshot of an entire page.

Aviary is awesome. They’ve created a whole set of great tools for creatives, from music editors to vector editors to image markup, including a screenshot plugin. Their screen capture plugin is a complete lifesaver for anybody who needs to take screenshots of webpages.

What makes Aviary different from just taking a screen capture using your system’s native screenshot tools is that Aviary allows you to take an image of a whole webpage. Instead of just capturing everything above the fold, Aviary captures the page from header to footer. Of course, there’s also an option to capture just a portion of a screen, which is useful for PC users (since that feature is available for Macs already).

After taking the screenshot, Aviary allows users to annotate and make edits to the image before they save it. Users can crop the screenshots, include text, and add shapes, lines and arrows. There’s a more advanced editor/image effects, but simply saving the image and bringing it into Adobe CS programs might be more beneficial.

5. StumbleUpon

StumbleUpon Toolbar

StumbleUpon is a browser extension that brings its users to new and interesting websites, depending on their interests. While StumbleUpon is known more as a procrastination tool than something useful (rage comics all day!), the StumbleUpon add-on allows users to stumble on pages in a certain interest only.

By turning off all other interests and only focusing on web design (or graphic design/web development/internet tools), users can discover lots of great articles, tools, and inspirational websites. StumbleUpon is actually how I found out about all the other browser extensions in this blog post!

These are the browser extensions I use on a daily basis. If I missed a good one, let me know in the comments!

2 Comments

Why ProjectFlow is Great

By on July 11th, 2012

On Tuesday, Barrel received a welcomed shout out from Smashing Magazine in a tweet complementing their application, ProjectFlow.

ProjectFlow, true to its name, is a project management tool that helps track progress and tasks. The beauty of ProjectFlow is its simplicity which allows it to serve perfectly from a smaller number of tasks such as a to do list for a bride and groom:

to larger and more complex projects covering a wide timespan such as a real estate agent tracking the status of each of their houses.

In this example the agent places each house under its specified status from meeting potential clients to done deals. ProjectFlow can even serve as a calendar, keeping track of weekly appointments.

On top of its simplicity and adaptability, it is easy to use. Re-ordering elements is done simply by dragging and dropping. But more importantly, ProjectFlow serves as a clean way to view the big picture. It enables its users to visualize each of the steps they must take to complete a project without a visually overwhelming or cluttered display.

True to 37 Signal’s Book Getting Real, ProjectFlow deals with essentials. I know I’m hounding on the simplicity aspect of the app, but I feel that frequently we lose sight of how important this really is. Since the app as a clear purpose, you are able to make the main aspect as close to perfect as possible, rather than making an app with several different aspects that are only mediocre.

Check out ProjectFlow’s Blog and also watch this awesome tutorial Diane made on how to start your own ProjectFlow!

1 Comment

Qwiki App

By on July 9th, 2012

Qwiki is an app that allows you to make customized presentation using a variety of media sources such as videos, maps and photos uploaded from your computer. Originally I was attempting to make a map zoom-in from outer space to Barrel’s office, but it was very jumpy and not that great. I then switched to making a Qwiki of our internship kick-off party at Silver Lining. A Qwiki seems to be perfect for something like a slide show. It was a little frustrating to use, but the steps to make one seem simple enough:

Step 1.

You easily set up an account and watch a brief tutorial video.  Timing seems to be a little awkward, with a slight lag between the voice over and the image being displayed.

 

Step 2.

Click that plus sign and start creating. You add all of the content you want your video to contain using the side bar navigation, as well as specify which animation your Qwiki should use.

Step 3.

You Narrate. This is probably one of the more important steps. One of the most unfortunate things about Qwiki is that without a narration the Qwiki does not take time. Your narration must be as long as you want your slide show. This feature hover is useful if you wanted to embed a speech presentation in a website. The recording provides three options, video , text-transformation (your writing is read by a robot), or record your own video to narrate.

 

Step 4.

Set the Timing. This is by far the most difficult aspect of Qwiki. Its simple in that you just click the content at the time you want it to appear. Its difficult in that its hard to get the timing perfect. Luckily, you can redo it and preview it as often as you want.

The Juan Torres shows some exemplary models of what Qwiki can become when you play with it. However, I couldn’t understand how many of the coolest image transitions are done on Qwiki. I feel that some  images are manipulated and then uploaded to Qwiki, where the transitions are utilized to make cooler effects. Similarly videos provide cool effects and greatly enhance the quality of the video. However, while the video can be from youtube or vimeo, I couldn’t manage to get  these urls to play in the Qwiki, so I’m guessing that actual video content should be uploaded from your computer. All in all Qwiki seems to be a great tool for combining multimedia presentations. However, it appears to me that the individual slides should be made off of Qwiki to achieve the greatest effects. Furthermore WordPress currently strips the iframe of the Qwiki embed so when put into a WordPress post only the link appears.

Dianne and I made a Qwiki solely utilizing the tools that Qwiki Provided, and decided we should dedicate our Qwiki to Tiffany who will be leaving Barrel, and here is the final product:

Play the Qwiki: Goodbye Tiffany!

No Comments
back to top