Archive for the ‘design aid’ Category

non-Adobe HTML 5 animation tools – Purple vs Hype

Thursday, October 20th, 2011

We can’t complain for the lack of tools to create rich HTML5 animated content. Even Adobe finally decided that flash is better for other things (like creating cartoons) than web site animations and transitions. Their “Edge” is actually a sign that they gave in to Steve Jobs’ and realized there IS a market for non-flash web animation after all. So it was the iPhone that changed the way we look at the web and influenced the new standards. Good.

We covered Hype a while ago, and now it seems that there’s another tool to create rich HTML5 content and now Mac App Store is promoting “Purple” – another pro tool for HTML5 animation. It seems that the interface is a little bit more refined visually than in Hype. Think – Pixelmator – with all those dark windows and panels it looks quite nice. As far as the performance goes though, I checked out the Purple gallery on my 2011 Macbook Air (core i5) and it performed pretty slow. Hype is much better in that regard, but Purple was just introduced so I hope they’ll work on performance in future releases. Aside from that it seems that as far as functionality goes both Apps are pretty similar, so it doesn’t really matter which one you buy, but Purple is now half the price (introductory) of Hype, so if you buy it now it will be a bargain at 15 Eur.

You can download Hype for 30 Eur here: http://itunes.apple.com/us/app/hype/id436931759?mt=12
And Purple is available here: http://itunes.apple.com/us/app/purple/id433132196?mt=12

iOS 5 GUI for iPhone (PSD) – a free download from TeehanLax.com!

Monday, October 17th, 2011

The guys that brought us all the previous iPhone OS GUI’s are at it again. What stands out in their work is both attention to detail and a very nice organization of the content. Everything is sorted in groups (including nested groups for smaller elements). This is priceless for UX people, who can now design the interfaces for their own apps with the right elements. It’s more of a drag&drop of lego bricks into place, than anything and we like it here.

Go to teehanlax.com/blog to download your free PSD of the iPhone GUI!

Adobe Announces Photoshop Touch!

Tuesday, October 4th, 2011

Don’t worry it’s not the crippled Photoshop mobile version, that didn’t even had enough functionality to compete with Photo Forge. It’s a completely new thing and it’s as close to real photoshop, as it ever was. There are layers of course, painting tools, patterns and blending modes. So apparently it’s set for some serious (as far as it can go) photo editing and content creation. That’s a smart move on Adobe’s part, and we’re eager to see when it comes out. Photoshop Touch should be available for iPads soon, Androids a little bit later (even though the demo is on an Android slate). It was announced along a few other apps (including a nice prototyping app, that’s an attempt to take on OmniGraffle I guess) at the annual Adobe MAX conference.

Video by the 9to5mac team

Pixelmator, Vector Designer and Hype as a Budget creative suite?

Monday, October 3rd, 2011

We have covered the alternatives to Adobe’s expensive suite many times yet, but since the release of Hype, there’s a lot more options for a web designer, to have an almost fully functional set of apps, for a fraction of the price. Sure, Pixelmator is not yet in 2.0 version, which will bring it even closer to Photoshop, but it’s gonna happen soon, and an improved type tool plus many other additions (vectors!) will make many people to seriously consider it. At 40$ it’s a steal. Same with vector designer – sure it’s simpler, but only a small percent of users (those alleged power-users) are actually taking advantage of all that illustrator has to offer. Most of us just want to design a logo quickly and efficiently. Another 40$ and it’s yours.

Flash is nearly gone from the web altogether (even Adobe now has it’s own HTML5 authoring tool), and Hype can do a lot of the things flash did, only with better battery/processor performance on mobile devices (that includes laptops). All of those Apps combined cost less than 150$. And sure they’re underpowered sometimes, and not as feature packed as their Adobe counterparts. But almost 80% of designers use the same tools all the time, the same filters and the same elements. Pixelmator is really close to being able to successfuly replace Photoshop, and both Vector Designer and Hype are constantly being improved as well. We may see a big split in the design community in a year or two, with Adobe loosing a lot of market share towards cheaper options.

I’ve been using those three apps alongside CS5, and I’m sure that I won’t buy the CS 6 update anytime soon. Monopoly is never a good thing, and it led Adobe to the high prices they have today.

Is it the end of Adobe Flash? Here comes “Hype!”

Sunday, May 22nd, 2011


Steve Jobs never really loved Adobe Flash. The omission of the technology from Apple’s mobile iOS platform was one of the examples of that. Flash was slow and hard on battery, so Apple decided to start pushing HTML5 technology, that could achieve the same goals, but without the CPU and battery strain. And they somehow succeeded because flash is less and less popular every day. Designers either don’t do animations at all anymore, preferring simpler, more usable sites,or make them in jQuery and HTML5.

The only problem so far has been the fact, that to make anything “moving” with those tools you needed to be a programmer, while Flash had a nice little 700$ application, that any designer can use to create. Well now that has all changed – A small company called Tumultco has released Hype – HTML5 authoring tool, that’s easy to use and you don’t need to put in ANY lines of code for the animations to work.

You can buy it (mac version) in the Mac App Store for the introductory price of just 29$!! That’s 660$ cheaper than Flash! Get it while the price tag lasts!

Here are some examples of the technology in use:
Gallery

WordPress index.html vs index.php struggle

Wednesday, April 20th, 2011

Usually when we make wordpress websites we don’t really want people to see the website in the making – so we create an index.html splash page with “under construction” or something of that sort and then we go back to tweaking index.php

Well for a while now (since wordpress 2.7) that’s not really possible because if you access www.mydomain.com it’ll in fact show the splash page, but when you go to www.mydomain.com/index.php it’ll also redirect itself to that splash index.html file.
All the other wordpress pages and permalinks work, but without the main page it’s kinda hard to edit now isn’t it?

I was searching for an answer for a LONG time and it turns out there is one.
http://core.trac.wordpress.org/changeset/9203 – here it is. If it’s all black magic to you or you’re just lazy (who isn’t?) I’ll simply tell you what to do :

Go to wp-includes folder on your server, find the canonical.php file and then find a line that goes something like that:

$redirect['path'] = preg_replace('|/index.php/*?$|', '/', $redirect['path']);

and replace it with

$redirect['path'] = preg_replace('|/index.php/$|', '/', $redirect['path']);

It’s just removing two characters but the result is a working splash page and a working index.php

Ain’t it just great?

Print design – bleeds, safe areas, margins, a0 / a1 / a2 / a3 / a4 / a5

Saturday, February 26th, 2011

Sure it sounds kinda easy, but when we design for print it’s important to keep some basic rules in mind. If you never did any print designs read on to find out what to do, to avoid instant failure. The most important thing is – modern printers are pretty precise, but still not as precise as your screen. That means that if you make an A4 sized paper and print it on a bigger one, the cutting and printing process together can result in your design being actually less than a4. And most clients don’t really want that.

(more…)

Typography Inspirations #6

Tuesday, February 1st, 2011

All of the images were found on flickr. Click on an image to go to it’s flickr page and if you like it let it’s author know!

(more…)

Photoshop quick tip – how to fake HDR

Monday, December 6th, 2010


To achieve a HDR-kinda look you can either play with RAW images, various software, filters or do a similar effect MUCH much easier. See how.

(more…)

Make your own font.

Thursday, November 4th, 2010

Well not exactly “make” but it’s more of an exercise to better understand the relations between letters and it also helps a bit in future logo creation. I made this one by taking the letter “o” from Arial Black and then cutting into it, modifying the edges and such, to create a whole typeface. This is not a finished piece as some of the letters need a little tweaking, but it’s surely getting there. Go on, try and make a font yourself!