Facebook love

I felt so honored by huge support on facebook since we launched, I wanted to give something back. So in true PENTHOUSE style I give you all a big thumbs up!

The birth of the animated gif

Gifs have been around since the 1980′s and have seen many evolutions. And with the surge of the social content, the animated gif is serving a very viral position. Animated gifs are the new youtube video… on Tumblr. Its the jazz of the internet, everyone is talking, sharing, posting… And with every faze comes a fashion, today it is the cinemagraph.

‘Cinemagraphs’

“something more than a photo but less than a video.”

These ‘cinemagraphs’ have been coined by Jamie Beck and Kevin Burg as the in between photography and cinema. It is yet another use of animated gifs, there are many more, but it is the one I will be explaining how to make here.

So how do I make my own ‘cinemagraph’?

Well, there are a number of steps to making a ‘cinemagraph’, in this cinemagraph tutorial I will walk through it in simple steps.

STEP 1 (camera, lights, action)

The best result comes from the best footage, you can use your favorite scene in a movie, or you can take your own. Use the highest quality camera you can get your hands on, many of the small compact cameras have HD video options. Use a tripod, or the nearest table, your aim is have to get everything still except the one detail that will be the focus of the image. Keeping it away from the edge, and just a very small area will help when making the gif. The file size only increases with pixels that change per frame.

STEP 2 – import the footage

You can use a number of ways to import your footage and prepare it for photoshop. Formats such as .mov you can actually import it straight into into photoshop, open the animation tab in windows>motion (or if you are trying out the Photoshop CS6 beta, it will automatically open it in timeline) and select the part you want. Then there is after effects or final cut pro, so wichever way you find is best, just make sure you select as few frames as possible with the least loss of quality. Edit to your hearts content and export or render your selection.

Take a look at Jamie Beck and Kevin Burg’s images, in each one there is mostly one small looping movement. Hair blowing in the wind, just eyes moving. The beauty is in the mood they create with something so simple.

STEP 3 – Import frames as layers in Photoshop

Use the import frames as layers option in file>import, in PS CS6 it automatically loads your footage as separate frames in the timeline. Now you can really fine tune your selection, delete all the unnecessary frames. You can duplicate your frames and then reverse the order to get an infinite loop, in the pop up menu in the right corner of the timeline tab.

You can set the pause between each frame, you may want to do this to create expectation in the images, to get people guessing what will move in the image.

STEP 4 – The still

The trick behind the success of the cinemagraphs is that most of the image is usually a still. The still image you can edit, adjust, basically do what you like with it, and then mask the parts that move away. So copy and paste the frame you want to use as the still at the top of your layers. Create an adjustment mask, use the brush to erase (in black) using the brush tool the parts of your footage that move (use white to un-erase). Play the animation often to see if there are parts you need to erase further, or less. Make sure that it blends well with the bits that don’t move.

STEP 5 – Optimisation

You can desaturate the whole, or parts, of the image to reduce the amount of colors. Basically a gif can have a max of 256 colors per frame of the animation, so reducing the saturation will create less color information and a better result.

I decided to desaturate the whole image, and mask back just the beam of light and the reflection in the window.

You can also crop and resize your image to reduce the file size. PS CS6 has a great feature that from Lightroom, pretty neat!

STEP 6 – Save for Web (the gif)

The final step is to save your sequence as an animated gif image. Select file>save for web and select gif as the format. I have circled some of the important parts you need to be aware of, I brought the file size below 1mb by reducing the size of my image to 360px wide. That is the limit file size that Tumblr will allow you upload, so it is a good allround standard depending on what the use of your masterpiece is… The final setting I set was to loop my gif indefinitely by selecting forever from the selection. You can set it to play once or set a custom number.

And there it is, your very own animated gif you can share with the world…

p.s. don’t forget to #tag it

     So anyone who hasn’t done so already, download the new Photoshop CS6 beta version, FOR FREE! http://labs.adobe.com/technologies/photoshopcs6/

     OK so with that done let me introduce you to the first photoshop I am extremely excited about using! I am by nature an Illustrator user. The clean solid style with the relative ease of creating intricate and simple shapes by just cutting adding and editing vector shapes has always appealed to me… I make everything from logos to websites using it, and I have been happy doing so… until now that is…

     I just downloaded the beta, and knowing very little of 3D made an extrusion of thePENTHOUSEPROJECT logo, with a click of a button! Whoa… this is pretty epic… along the way I noticed (along the super clean and dark interface) some very illustrator looking buttons. Align, pathfinder, character styles… Whoa, this is getting too much. Yes I am rambling. But if you are skeptical, just try it!

     As I was reading a review about it by Gizmodo. I became more and more enthusiastic. Its all about improving the basics he says: ‘concentrate on the basics, that 10 per cent that does the 90 per cent of the work’. Not just another add-it-on-because-someone-someday-will-use-it-sometime… no! this is improving stuff we’re all gonna use, everyday! Stuff we use from other programs, like the non-destructive crop feature in Lightroom, and an epic new RAW algorithm… Booyeah! Bring on the goodness!

     Well I only just opened the program and now I’m spilling my guts about it, so just try it out and see the awesomeness for yourselves… happy Photoshoping!

Responsive web design… Well its a hot topic now that there are new devices coming out every day. And with each new device comes a different resolution, a different dimension. That beautiful website you just designed looks great on your desktop, but on your iPhone… well its all scrambled! ‘What can I do!? I hear you saying…. Respond says I!

Media Queries

The first response to multiple devices was Media Queries, it checks the specifications you give it and allows you to add CSS styling for that specific instance. First brought in as media types in CSS2, it wasn’t really adopted on a wide scale, but CSS3 took it to a whole new level with Media Queries, rather than just looking for a type of device they look at the capability of the device. And this lets you do all kinds of things.

For example you can check if someone is holding their phone upright, or landscape…

Or what size the browser window is and do stuff like http://orangecoat.com/rip-ie/

We can change the layout, change what content someone gets to see if they are on a smart phone for example, we could even go so far as to show a unique heading for 165 different instances of our site…. http://arleym.com/

Responsive.is sports some pretty amazing examples of responsive websites. Look closely at the Maritime Belfast site, it doesn’t just respond its layout and content… the map comes to life on a desktop showing you the exact location to each piece of history.

So we can change our site for each device individually.. but what happens when they bring out a new device? Which is like almost every day! We would have to figure out what’s different on this new device, and then add a new Media Query to each one of our sites?! No way Jose! Thats just ridiculous! Hence the birth of the fluid website…

Fully Responsive & Fluid

A fluid page will flow to the confines of the browser window. This means paragraphs will rewrap as the browser window is resized. In other words, the website now has the technology to automatically respond to whatever is thrown at it… not always true of coarse, we the designers and developers are still human after all. But I’m happy keeping some human errors alive and kicking. Or we may end up like this. Many people believe fluid pages look better on a wider variety of browsers because they are more ‘accommodating.’ However, these truly fluid sites give up almost all control over design and layout due to their nature.

Great, so I can use % to place my content. Does that mean I should just forget all I have learned about grids and let the content flow however it likes? Sure you can, if you want to. But it doesn’t mean you have to! Welcome to responsive grids. There are a few I know of, the 1140 for example, or skeleton. But one that I would like to go into a little more detail about is the golden grid

The Golden Grid System

The Golden Grid System by Joni Korpi is something I will probably make a whole post about in the future. It is what thePENTHOUSEPROJECT LAB 1.0 is based on. The code is pretty radicle at first glance, but once you get your head around it, it really is quite epic. It is based on a combination of the European (DIN) paper system and the Unigrid. So it literally folds the content of your site from 16 columns on large desktops, to 8, to 4 for mobile resolutions leaving one column on each side for the margin.

It has this handy gridlet which shows you the grid in action. And best of all it has a zoomable baseline grid… WTF?!… Yes the baseline adapts to the font-sizes, vertical paddings, margins and borders etc, they’ll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact.

All pretty awesome stuff this responsive design, and it is only the beginning. The Boston Globe started a real buz around the web design community as one of the first big commercial websites to be fully responsive. It was created with the help of Ethan Marcotte who also wrote a book apart on responsive web design. If you are interested to learn about responsive design I couldn’t recommend it more. And don’t worry, its actually really skinny…

I hope this inspires you to create your own responsive design… and I am excited to find out whats next in the future of the intranets

Hi everyone, well here goes. This is my first laboratorium experimentum, a little how to change css class with jQuery.

Short Intro

I am mostly the visual designer here at thePHP so my developer skills are still very basic. That doesn’t mean to say I have not done any, I have managed to put some sites together all on my onesies… but ehem… its basic html and css. And that is what I want to improve. Nowadays there is so much styling you can apply in code, that is almost impossible to conceptualize in Illustrator or Photoshop when you don’t know what is actually possible!

So that is what I am busy learning amongst other things… Oh if you have no clue about jQuery check out this little game  http://codecademy.com  I learned more JavaScript in 10 minutes than I have in the last 6 months, and jQuery is basically a JavaScript library to make it easy, so you gotta start there.

I started with my idea, to make a funky color flip of the background and thePHP LAB logo, and decided I would use jQuery to make it work… now all I had to do was learn how to do it!

The HTML Markup

The markup is very simply a link (the button) inside the <body> tag, containing the background color and image class .day. It is this class that will be toggled on and off to create the effect.

Give the body an id and a class, it can be whatever you want, but make it obvious so you can easily use it in the jQuery function id ‘selector’ class ‘day’ and the button id ‘button’ so we can tell the function that, when the “button” is clicked, the id ‘selector’ is targeted and class ‘day’ is replaced.

<body id="selector" class="day" > 

<a href="#" id="button">click me</a> 

</body>

Next the CSS styling

I made the body full width so the class day and/or night apply the background-color to your whole screen.

html { width:100%; height:100%; } 

body { display: block; text-align: center; height: 100%; width: 100%; margin: 0 auto;
    } 

.day { background: url(img/thelab_logo_black_small.png) center center no-repeat #FDBB30; width: 100%; height: 100%; } 

.night
    { background: url(img/thelab_logo_small.png) center center no-repeat black; width: 100%; height: 100%; } 

#button { font-family:
    sans-serif; font-weight: bold; background-color: white; color: #FDBB30; padding: 1.2em; border-radius: 1em; text-decoration:
    none; line-height: 2em; } 

#button:hover { color: black; }

And last but not least…The jQuery function that makes everything work!

The function is activated by clicking on the button, anything that has the id ‘button’.

This finds the id=”selector” and switches class ‘day’ to class ‘night’, or if class ‘night’ is already active it switches it to class ‘day’

$(function() {
$( "#button" ).click(function(){
$( "#selector" ).toggleClass( "day", "night", 1000 );
$( "#selector" ).toggleClass(
    "night", "day", 1000 ); return false; });
});

And thats it.. pretty simple stuff, but very satisfactory when I made my idea work!

I hope you found this useful, please feel free add your own comments and alternatives. It may not be the best way, but if it works, it works. If there is one thing I learned while making this, is that there is always a different/better way of doing it…

Well here it is, thePENTHOUSEPROJECT Blog.

We have been itching to get it online.. tweaking tweaking … but here it is, finally! theLAB, our official blog. The place we’ll be putting some interesting stuff about  Graphic design, Illustration, web design, web development and similars (basically all the stuff we do on a daily basis).

We’re already cooking up some great experiments for you, so get your safety glasses ready and those white coats on! And check out the Karin’s daily snaps, showing a little bit more of Amsterdam (or wherever we are) every day.

Welcome to our place,

thePENTHOUSEPROJECT