Our Blog

Subscribe you will

Category Archives: Tutorials

Doing More with LESS.js

By Phil

less_is_more

If you’re a beginner front-end developer and haven’t heard of LESS then sit back, relax, get a nice cool drink and let me make your life a little better. Are you sitting? You’re a front-end developer, of course you are. Let’s begin.

I’ve written CSS for the worst browsers ever. IE 5.5, IE6, IE… you get the picture. I can Ctl+S, Alt+Tab and F5 in my sleep while writing semi-cross-browser compatible code from the first line. When I’d first heard of LESS’ variables, mixins, and nested syntax I thought it sounded interesting and figured if it would save a few keystrokes I’d give it a shot. Best decision ever. Here’s why… Read More

 

How I made my first iPhone app… or, how not to make your first iPhone app

By Phil

FieldTrip, my first mobile app offering, is complete and, boy, the learning curve was sharper than Steve Job’s acid washed jeans. Here is a brief look into my development process, what I’ll never do again, and what I will do for the next one. Hopefully it will help new app developers get started.

Nerd up!

As this was my first app, I did not hit the ground running. It was more of a slow crawl with frequent, whiny breaks. About a year ago I purchased a book titled “Beginning iPhone 3 Development: Exploring the iPhone SDK“. After reading and working through the first few chapters, I realized that the book required a basic knowledge of Objective-C which I did not have. Learning a language is much different than learning a platform so the book was shelved in hopes that I’d soon have time to come back to it after figuring out Objective-C. Much like John Travolta’s 3rd wind acting career, I never happened. It was my Battlefield Earth.

A few months later I began to experiment with web based iPhone app development. With this method, an app is essentially a web view and the code is similar to a website. This lead me to PhoneGap and jQTouch. Both worked pretty well, especially in combination, but could not create a truly native application as they were webkit based. Webkit also meant that apps couldn’t take advantage of the phone’s hardware. No camera, push notifications, accelerometer, GPS, etc. All smoke but no fire. A point driven home by Apple when they began cracking down on non-native apps.

Courtesy appcelerator.com

Another few months more and I found Appcelerator. With Appcelerator, applications are created with javascript (a familiar language to us web devers) and compiled into native applications using their magic application and xcode. The brain of the app remains javascript but the application UI and database is fully native and you get access to all the phone’s hardware. Booyah! With this new toy, I set off to work.

New to Appcelerator, and forgetting all 10 years of real world practice, I started out in code to create my app. I knew more or less what I wanted. What could go wrong. Bad, bad move buttercup. I knew better but was drunk with Javascript power.

This type-happy start led to 7 complete rewrites as I delved deeper into Appcelerator and its best practices. It was yet another reminded that planning trumps passion. Rockstar.

Here’s how it went down:

  • 3 rewrites before realizing, maybe I should wireframe this mother.. like all other projects I work on.
  • 2 rewrites after actual testing a fully functional wireframe prototype, on a few users. Again, stupid move on doing this so late as holes in functionality and usability were uncovered which made rewrites necessary.
  • 1 rewrite after deciding to design based on the wireframes and mash it into my code. I plead temporary insanity.
  • 1 final rewrite to consolidate my code, properly create my views and elements to account for all functionality, and incorporate design systematically instead of the french press method. Side note, French Press sounds like a really badass wrestling move.

The end result is an app that works great and I’m very proud of. The lesson is this. Figure out what you’re doing before you start doing anything. With that little tidbit I could have cut development time by a month.

For the next app, my process will be as follows:

  • Define the feature list up front. Figure out what the app does before starting. If not, the app will take on a life of its own in development and I’ll find myself adding sound effects, hardware vibration and unicorns.
  • Sketch wireframes in pencil to sort out how a user will navigate and interact with the app. This will also define how many templates are needed. Remember to use pencil as it will allow for continual refinement of the experience and, as the ideas keep coming, keep me from worrying about alignment, fonts, and how large a certain field may be.
  • Take the refrigerator worthy sketches and create refined wireframes. Check them to make sure all necessary views are accounted for then test them. Either create a quick clickable website, use MockFlow, or open Photoshop and let someone pretend to touch.
    While someone is reviewing the wireframes, I’ll keep my mouth shut and will not explain to them what they should be doing. A user should be able to use the app without being told what to do.
  • Take the feedback, make adjustments and repeat the wireframing step. Expect to change how the views look and connect to one another at least once. If there are no updates, either I’m a user experience god or didn’t really listen to feedback.
    Don’t design until the wireframes are completely locked down. Developers tend to see things in ways that real users do not so I need to build for a users and not for myself.
  • Make those wireframes into the best damned designs I can muster. If I suck at design, get help. While it does matters how fast a table loads or how streamlined database queries are, if a potential customer looks at the screenshots on the App Store and throws up a little, they’ll never see the results of all that coding awesomeness.

This is what I’ll do next and I hope it helps you get out there, make that first app, and lose less hair in the process. Leave a comment with your thoughts or experience. I’d love to hear them.

 

The Iso50 Field Guide to Color Management

By James

iso50_banner_color

I am always brushing up on my technical knowledge of the printing process and color management, so I obviously have found this little field guide to be most helpful. Alex Cornell and Scott Hansen of ISO50 have put together an impressive and definitive Field Guide to Color Management.

Though there are literally thousands of guides on the web like this, ISO50’s is not only replete covering everything from lighting to print settings but also comes from a trusted resource plenty experienced with color management and printing.

Read More

Filed under: Design, Tutorials

 

Mind-Numbingly Easy Waterfall effect in After Effects

By Andrew

Whenever you see the Paragon blog go quiet for a while you know it’s because we’re really busy. But I wanted to share a quick tutorial that came in handy last week for one of the projects that’s been keeping us busy.

We needed to create several natural effects like snow, sand, fog and a waterfall and use them as transition elements for this project, but we were also on a tight deadline so trying for photo-real wasn’t an option. CC Particle World to the rescue!

I’ll tackle the waterfall in this post and share the other natural effects in a separate post.

Here’s the effect we ended up with.

Simple huh? I bet the seasoned pros can already tell how this is done. But for the rest of you, here goes…

Read More

Filed under: Tutorials

 

Unreasonably Easy Action Movie 3D Text in Cinema 4D

By Andrew

(Beginner’s Level )

Some time back I had the opportunity to create some artwork for an indie film shot by Epic Image Entertainment’s, Justin Lutsky. The  idea was to create something that looked big budget Hollywood circa 1990′s Action movie, but the director needed us to turn things around REALLY quickly.  So, of course, I turned to my go-to 3D software for all things awesome: Cinema4D.  I’d been introduced to the world of C4D last year when looking for a simple program to create some 3D text for an album cover I was working on, and since then I’ve been constantly amazed at the results you can achieve in a short space of time, and with a very shallow learning curve.

So here’s the equation:

theequation1

The Step by Step follows…

Read More

Filed under: Tutorials

 

Simple Tips for the PHP noob

By Phil

When I first started web coding a few years back, I did some really really strange things. Self taught from books, cereal boxes and decoder rings meant code was jumbled with misused “if statements”, “for loops” and various bits of hackery. I often think of the simple “ah ha” things that would have helped me get through those bumpy first few years and thought I’d share a few.
Read More

Filed under: Tutorials

 

Photoshop Tidbit 3: Smart Object Use

By Andrew

PshopTidbit3.jpg

I remember learning about this one from the Photoshop Guys some time ago, but recently I’ve been using it a lot in some web designs so I figured I’d share it in case you could find it useful as well. It involves using smart objects within Photoshop to keep a layer’s resolution intact even after resizing it.

If you’re as indecisive as I am when you’re designing then you like to make sure your changes are reversable as much as possible. And if you’ve ever tried to scale an image up after scaling it down you’ve realized that that’s not exactly reversible. Unless you use Smart Objects.

Read More

Filed under: Tutorials

 

Photoshop Tidbit: Alt Dragging

By Andrew

PshopTidbit2.jpg

I discovered this little gem of a time saver completely by accident. Thanks to a former co-worker of mine I knew about the benefits of Alt+ dragging a layer’s layer effect icon to copy that layer’s style onto another layer.

AltDrag_effect.jpg

But what I didn’t know was that you could do the same for the layer’s mask. Just make sure the cursor’s over the layer mask icon.

Read More

Filed under: Tutorials

 

Photoshop Tidbit: Compound Vector Shapes

By Andrew

PshopTidbit1-title1.jpg

As my first attempt at writing a tutorial I figured I’d start small and share a simple little tidbit using shape layers.
I used to try and achieve this effect by using masks but that was too final for me. I wanted the freedom to play around with the shapes, and come back later and mess with them some more if I wanted to.

Read More

Filed under: Tutorials