What Twitter Isn't Telling You About GIFs

embedly:

The 13 year old in all of us rejoiced when Twitter started supporting GIFS! Yaayyy, but I’m here to crush your dreams, Twitter’s GIFs are actually displayed as looping videos.

image

Womp, Womp.

We did a little test, here is the original:

image

Here is the Twitter “GIF”.

It appears that…

My Toolbox

Current Design & development essentials

I love the way I work and have gotten so used to it that each time creating something, it just feels nice to create with these tools. Below is a list of tools, hardware and tips I use, feel free to reply of course.

Hardware

  • Paper Notebook: I love carrying around notebooks. Though I always have my iPhone at hand, it sometimes feels more intuitive or saves me a lot of time to write things down on paper. Notebooks are great for sketches too. I do some sketching on the train or basically everywhere, I just grab my notebook and start drawing. My preferred brand is Moleskine.

  • Bamboo iPad stylus: My iPad forms a great medium for when I have a sketch idea but want a vectorize it. You can try, but the way I think of it, you can’t sketch on an iPad with just your finger. Styluses are pretty cheap to get but the cheaper ones tend to break faster. I invested in the Wacom one (I really want Pencil though) and am so satisfied with it. The nubs are replaceable too, so that’s a plus.

  • Bamboo Wacom Tablet: Bought this second hand. For beginning designers you don’t even need to buy the expensive ones; The one I have has a small surface but does great when doing basic pentooling in Illustrator or brushing in Photoshop. In fact I couldn’t imagine brushing without it when I’m working at home…

  • Mouse: Nothing to fancy, this is generally just always in my backpack for when I’m on the move, or gaming at home.

  • A pair of good headphones: Listening to music while designing (coding not so much) improves my flow. Speakers are great but when designing else than home that’s not really an option. I’m a big audiophile but for on the move headphones I’d suggest either Coloud or Urbanears.

  • Second display: trust me you’ll never go back to one display once you’ve got two. Especially for designing this comes in so handy. I’d recommend 21” or higher.

  • Laptop: the portability will come in so handy when you’re switching between designing and developing. I hate Windows and love Mac so my current one is a 15” MacBook Pro (getting a retina later this year).

Designing with software

  • Illustrator: I love spending time here. I’ve come to know the tools quite well and once you do it’s amazing what you can do with it. Sketch is uprising but I’m not really convinced by it, it still lacks a lot of features that PS & AI have.

  • Photoshop: still my preferable spot for creating designs and websites. My Photoshop is pretty customized with presets and extensions but out of the box I’d say Photoshop already has everything you need.

  • Sketch: I’m not fully convinced but love the potential and simplistic look. The great point Sketch scores is because it works with vectors and is faster in booting than Photoshop or AI are. I’m currently using it as a quick stop for quickly drawing things that would take to long in PS or AI.

  • Pixelmator: It’s not nearly a replacement for PS but again the great feature here is speed. It hase some pretty intuitive controls and a handy Export feature (which beats Adobe’s “Save for Web…”). But to be honest I mostly use it for memes or cutting out objects from an image.

  • Macaw: I’m intrigued by the new trend about designing without coding. Macaw blew my mind once I first entered it. The interface is intuitive and the code building on the background works pretty good. (It could be a little better, semantic wise)

Also see: Sparkle

  • Balsamiq: Wireframing could be done in AI as well but Balsamiq has these lovely pre made elements which just make it so great to work with.

  • Evernote: In my personal point of view, every designer should have some kind of scrapbook with designs they like and inspiration. Evernote makes sure it keeps this synced across all my devices and it’s become something I couldn’t miss anymore. I’ve tried Ember but I came back to Evernote because I felt uncomfortable in Ember (I still use it for collecting photo’s though).

  • Fontbook & Fonts: I still use this, but only to install fonts or create sets. For viewing fonts I use Bohemian Coding’s Fonts (which is pretty like hell). Worth noticing is that I also use TypeKit sync with Adobe CC for working with fonts in Adobe software.

  • Sip: I’ve been using Frank DeLoupe as my favorite tool for almost a year now, but recently I switched to Sip. It just seems more right to use it, it has more options and better switching between color modes and profiles.

  • Quartz Composer: You’ve probably already seen a lot about this since it’s the trend of the moment. Quartz Composer might be difficult to start with but with the right documentation you’ll get along. Required is that you install Origami when creating QC files because this gives you the options you really need.

  • Xscope: I hate digging into PS (since it takes so long to boot) to measure things from screenshots so I use this. It’s actually something every modern designer should have in my opinion. Xscope measures on screen distances with adaptive rulers and a lot more tools to pick from. Not cheap, but so useful.

  • PS Extensions: Subtle Patterns, DevRocket, FlatIcon, Random User, Flat Shadow, PSKiss, Ink, Leyrs.


Developing with software

  • Coda: My long time favorite editor. Comes as a web editor when you buy it but I use modes and plugins to make it my editor for everything. Love the versatility that Coda offers (modes,plugins,skins) and it’s more than just an editor. It’s like a whole suite for browsing, managing, remote edits. I could go on for hours since I love it so much but I won’t. Just remember the way Coda does snippets (clips) are awesome.

  • Sublime Text: I know this is the favorite tool for a lot of developers but I don’t use it that often. Yes it offers a ton of options (if you have Package Control installed…) but when I use it, it’s mostly just to make quick edits or do quick coding sessions which are not too complicated.

  • Kaleidoscope: Kaleidoscope compares files and highlights the differences between them. I used to use a tool which was included in Xcode for this (think it’s called Compare) but Kaleidoscope has way better highlighting and can compare more than 2 files. Can also compare images which might come in handy from time to time.

  • Codebox: Though Coda does a lot of my snippeting for me already Codebox is still something I often use. My library is loaded with Bash snippets which I use in Terminal, Codrops or Codepens I find online, since I hate saving these to my HDD. Plus, Codebox offers a really neat menubar icon!

  • iA Writer: The definitive Markdown editor. Right when purchasing my Mac this was the first app I installed. I never use TextEdit or Notes but always Writer. The experience you get is just so great, it has a crazy great interface when typing and a superb focus mode. Even Github’s MD editor has to make place for this. On top, it offers iCloud syncing so I can pickup on my iPad where I left (Fun fact: this whole post is written in Writer at the moment)

  • MAMP: The full webstack you need for PHP development. Pretty straightforward.

  • Hammer: I know I can do most of this with grunt too, but at my current level I don’t know enough about grunt so I prefer this GUI tool. It compiles everything from your work folder in a build folder which you can upload to the server. Works great with SASS, JS, etc. and can install templates like the HTML5 Boilerplate and Chopstick for easy start on a project.

CodeKit: THE Mac App For Web Developers) seems to get a lot of attention too, check it out it’s kind of similar.

  • SiteCrawler: GUI alternative to wget. It’s nice but I tend to use wget from terminal way more now I have it correctly configured.

  • Debookee: Network analyzer which is really easy to get started with. Gives a great overview of my local network and whats incoming and outgoing in network traffic.

Also check out Wireshark (if you’re comfortable with XQuartz or X11 or package managers)

  • Github: Never really used it from the terminal but why should I? The app is so much more convenient. It gives a really neat overview of cloned repo’s and pushing your own local repo’s to Github.com is really easy too!

  • FontPrep: Before I used FontSquirrel to create webfonts for websites but this app does it way easier and quicker. Just drag and drop the fonts you need converted for web use.

  • Sequel Pro: These days it’s even included in MAMP and there’s a reason why. Going into phpMyAdmin trough a browser is such a hassle when you can use the clean and intuitive interface that Sequel Pro offers. Easy import and export to database formats and managing database content and structure.

  • Cakebrew: There might be a time when you need Homebrew to install certain packages to your Mac (like wget) and doing it via Terminal might be ok but I think Cakebrew gives a nicer overview of errors and install process. Your installed packages are also nicely listed in the app.

  • Transmit: The ultimate FTP app. I mostly use Coda for editing on the server remotely (some devs must hate me right now) but just uploading files to school’s FTP server and managing files on my local Apple TV server is so much easier with this. Has a super-nicely designed interface and has split view and a great transfer window which doesn’t get in the way of your open windows.

  • Dash: My dev skills would be a lot less great without this. Dash manages and installs code documentation and cheatsheets. Offers every popular language and a lot more. The workflow for Alfred is great, let’s you see code right in Alfred! Tip: enable the menubar icon and disable dock icon for optimal workflow!

  • Terminal: I fell in love with terminal a while ago and to this day I still think it’s one of my favorite tools. You’ll have to practice to get used to it and learn some basic commands before it will really pay off, but once it does it’s fantastic. OS X’s Terminal has great color scheme’s which you can choose from (try Pro), but I installed a custom one (Toy Chest) which I just absolutely love. Tip: Install Mathias Bynens’ dotfiles to optimize your workflow!

  • AppleScript Editor: AppleScript’s syntax is just complete horror to me but writing basic apps can be really fun to do. Still haven’t found a code editor which handles writing, compiling and building the right way, apart from the native OS X app. If you found one, please send me a tweet!


And that concludes this article

I hope you enjoyed reading this and learned some new things. Some tools in here might be optional but I would suggest you try them all and fall in love using them, like I did.

Thib out.

Introducing New Creative Tools on Instagram

instagram:

Today, we’re delighted to bring you a set of new creative tools on Instagram with the ability to adjust brightness, contrast, saturation, warmth and more.

Inspiring creativity is incredibly important to us—and as the Instagram community grows, we’ve been excited to hear requests for more ways to…