Is it the end already?

By on August 24th, 2012

It’s been a long time coming, but we celebrated the last day of internship with drinks and food at One Mile House two weeks ago. To commemorate the occasion, we filled out a reverse interview, where we asked Barrel team members submit questions for us to answer. Here it is! Be prepared, it’s long. (Hopefully a photo gallery will come to accompany it soon when our nas gets back up!)

Marianne: Do you have a list of places where you’d reeeeally like to live (or visit) sometime in the future?

Katie: Yes! I would love to visit so many places! I want to backpack all around Europe, and I definitely want to go to Japan, Hong Kong, and Australia. New York will always be home for me, but if I had the money and time, I’d go all around the world.

Diane: Right now, Macchu Picchu is all I’m thinking about. I really want to hike those Incan trails.

Taylor: I’d love to be in Rio de Janeiro for the World Cup. I also want to go stay on a ranch in Montana which is really random, but I love to travel so I’d take any opportunity I can get to go anywhere.

Peter/Jan: What was your favorite project of the internship?

K: I’m really proud of Brink. I had the most creative freedom with this project, and I enjoyed re-branding and re-thinking the website. It’s also great that it was an intern project; Diane, Taylor and I had pretty much full control over the whole thing.

D: Brink, for sure, because we really owned that project ourselves.

T: Brink- seeing the whole process was awesome!

Peter, Betty & Angel: What was the best meal of the internship?

K: Pho! I get really excited every time I see the a of pho containers on the kitchen island. Plus, we get to make all the corny pho puns :].

D: I really loved Boram’s cooking. It makes me feel all warm and squishy inside when she cooks!

T: This is tough- my favorite snack was the Parmesan Garlic Pita Chips. I’m actually addicted to them now. But my favorite meal was probably Mexican because it reminds me of home.

For Katie: Do you remember a particularly inspirational website or work of art that made you want to go into design, or at least one that you saw a long time ago that’s stuck with you today?

K: I have horrible long-term memory so I couldn’t tell you which websites inspired me when I first started tinkering with code (which was when I was like about 10 years old). However, I was completely blown away by the first “parallax-y” website I saw: Atlantis Lost World’s Fair. That was a point where I realized that websites don’t have to be a variation of the same layout grids with headers and footers; they can tell stories and brings users on adventures (without flash)! http://lostworldsfairs.com/atlantis/

For Taylor: Do you feel like you’re a “programming” type? Why or why not? Also, what was the first thing you programmed?

T: In a way yes–I really like problem solving, puzzles and logic and programming consists of a lot of that, but in a way no because for me programming is not about the technology as much as the figuring out how to do things.

For Diane: What was the hardest thing that you had to learn about project management for this internship?

D: The hardest thing was learning how to interact with clients right away, it’s always a bit difficult to get a handle on when to push back, and handle unexpected questions that you haven’t encountered before.

Angel: If you could have one superpower, what would it be and why?

D: To freeze time, so that I could get all the sleep I wanted. Also, so I could really really people watch closely. Did that make any sense, or did it sound creepy?

K: Teleportation! I’m so lazy; the time it takes to get to places is one reason I don’t get stuff done sometimes.

T: Telekineses- I’m thinking its a two in one because not only could i move things with my mind, but I probably could fly too if I moved myself with my mind.

Betty: When was your breakthrough moment? (aka When did you know you were getting comfy among us barrelheads?)

D: Hmm, I can’t really pinpoint anything. Maybe one of many 5-6 o’clock snack sessions, lovely wine and dines?

Peter: Where do you see Barrel going in the next 6 months? In 1 year?

D: This is a tough question. We’ve luckily been able to watch Barrel change while at the internship, moving upstairs, and also new hires coming aboard. I feel like I might not recognize it in a year! I suspect that the way we approach projects, and what Barrel will offer its clients will change and expand. The digital landscape itself is changing a lot.

T: I feel like Barrel has grown so much since we started in June, especially with the launch of ProjectFlow, all the new people and the move. It will be interesting to see if Barrel Spends more time on new apps like Project Flow or continuing expanding their web development, but I suspect Barrel will go far. I just hope I can recognize it when I come visit the new office!

Jan: When and how did you come to be interested in ____________. (i.e web design, coding, etc).

K: I actually thought I was going to be a developer until about three years ago; I started learning HTML/CSS in the fifth grade, on Neopets, and got pretty good at front-end development. I’ve always loved looking at beautiful web design, but I didn’t consider myself “artsy” and I thought I would suck at designing.

It wasn’t until college that I took my first design class and fell in love with it. I realized that I didn’t need to know how to draw to be good at design, and that I wasn’t as bad at the craft as I thought I would be. I’m glad I switched; design makes me happier than coding ever has.

D: Complicated.. I started out as a pre-med major in college until I realized I missed the arts, so then I double majored in Visual Arts/Art History and English Literature. After doing stints all over – in publishing, galleries, and more – I decided that what I wanted to do most was engage with the current world, aka in digital.

T: Well junior year Cornell kept angrily emailing me to pick a major, so that’s when I started coding. I just thought it sounded like an interesting subject to complete a major in since I had already dabbled in so much other stuff.

Betty: What name do you call the glass conference room by? (This one’s for Wook!)

T: Hands down its the baby conf.

K: Baby conf. What else would you call it?

D: Ditto

Jan: What’s the best highlight of your experience at Barrel? (A Barrel moment)

D: Taylor and I getting mauled by ping pong balls daily just sitting at our desks.

Angel: If you could give one piece of advice to another Intern starting out at Barrel or elsewhere, what would you say?

D: Stay interested, and always be curious. Don’t be afraid to express your interests. I’ve always been more of an introvert at heart, so stepping out is always difficult. But it usually pays off, and you could be surprised by some of the responses you get.

K: Don’t be afraid to ask questions! You’re meant to learn during internships, and you’ll do more learning asking for help than trying to seem knowledgeable and amazing at what you do (even though I’m sure you are knowledgeable and amazing at what yo do).

T: Yeah definitely don’t be shy about questions. I always  feel guilty interrupting other peoples work but everyone is happy to help.

Do you have any plans for what’s next?

K: More interning at Barrel! And finishing school as soon as possible. I can’t wait to be done with it.

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

A Day in the Life of a Barrel Intern

By on July 25th, 2012

I’m not sure if it’s just me, but I love reading about what other people do on a daily basis (like those articles where a person walks you through what they’re doing at specific times of the day). Now that I’m interning at Barrel, I thought I would give you a little insight on what a day in the life of a Barrel intern is like.

A Barrel Monday

9:10am
My alarm rings and I get out of bed right away. I feel like hitting snooze just prolongs the torture.

9:45am
I’m out of the door by 9:45am, plugging into my iPod for the 15 minute walk to the office.

9:55am
Once I get to Barrel, I always have an internal debate over whether I should walk the 6 flights of stairs up to the office or use the elevator. The elevator usually wins that battle.

9:57am
Everybody’s introducing themselves to the new guy. Welcome to the team, Nelson (and Brandon, who stopped by at the office a little later)!

Looking fly, Nelson.

10:00am
The first thing I do once I’m on my computer is check my email and calendar. Before I start any work, I need to get up to date on upcoming tasks, meetings, and pictures of unlikely friendships from Aretha’s internal weekly recap emails.

Aretha loves sending us pictures of unlikely friendships.

10:10am
After I get everything in order, I fire up illustrator and start working on new Sanctuary T homepage, newsletter and blog post banners. Summer is here, and they need new promotions to keep their sales going.

11:15am
Jan sent the team a cool find: Interactive Chrome Experiment. I spent a little bit of time playing around with it and wondering how doing something like with HTML5 and CSS3 is humanly possible.

11:35am
I’m starting a draft of this blog post! I try to put at least one post up every week.

12:15pm
Mondays mean team design meetings! Peter checks in on what everybody will be working on for the week. We also have a presentation or activity every week — presenting inspiration, sketch sessions, and planning internal projects.

Today, we looked at inspiration for the Barrel website redesign. Team members were asked to bring 3-5 inspiration websites to generate ideas. I’m doing inspiration for about pages, along with Lee and Andrea. Here are the sites I presented:

http://www.ngenworks.com
I love nGen Works’ illustrations and fun taglines. Their “on the nightstand” tidbits in the full bios are a great way to reveal the personalities of their team members.

http://www.arc90.com/team
The way Arc90′s team photos change on hover is a nice surprise.

http://www.glueisobar.com
Glue Isobar breaks out of a strict grid with some bigger thumbnails on their team page.

http://www.campaignmonitor.com/our-story
Campaign Monitor’s video tour of their office is amazing. It makes their team look very relatable and friendly, which is important for any service-based business.

http://www.wearepapertiger.com
We Are Paper Tiger’s about page is very simple, but I like how they list things they like to show a little personality.

1:30pm
Lunch time! I forgot to take a picture of my food before I ate it, but we had BBQ chicken, a huge fruit platter, mashed potatoes, cornbread, mac & cheese (I’ve been craving this!), yellow rice, and herb potatoes.

2:00pm
I’m updating Chamber Music Society‘s click through presentation with Lee, fixing some technical color issues with Sanctuary T banners, and tweaking CSS styles on Keg.

3:15pm
Diane and Taylor scoots over to my desk to talk about Brink Magazine‘s individual art page redesign. We’re trying to decide if we should put thumbnails on the page or if it would distract users from the artwork.

None of the website redesign is up yet, but here’s a sneak peak of what Brink will look like:

A beautifully clean new Brink.

3:45pm
After revising Brink designs, we had a quick meeting with Boram in the “baby conf” to plan Barrel’s barbecue on Friday.

We call our smaller conference room the "baby conf."

4:00pm
Aretha checks in with me on Connecticut Policy Institute edits, and I get to work on them to prepare for a one-on-one review in an hour.

5:45pm
I’m doing some last edits on this blog post, washing the dishes I used for the day, and wrapping up my work.

6:00pm
I pack up my stuff and head to the gym! Most days I’ll stay a bit later, but I’ll leave at 6 if I’m going to work out.

 

No Comments

Soiree!

By on July 20th, 2012

Have you had any cake yet?

Barrel lovingly celebrates each one of our birthdays with a broad range of cakes! We’ve had ice cream, carrot, and flourless chocolate so far. Yum. It’s always a great afternoon break when you have some cake.

Have a happy Friday everyone! Though gloomy, the rain is helping cool down this hot New York summer.

No Comments
back to top