DOF Typography, what the hell is that exactly? Well I needed one day to make the text from a header page someway different, sadly color, position, angle and all other stuff didn’t quite get the main idea of different. Then I thought to make it look like the letters were put there by hand and look like they were hanging, some sort of smooth 3D effect.

Well the idea is not new I’m sure of that, but the solution to do it in Photoshop is quite easy peasy and no super cool plugins or 1000 layers are necessary (feel free to search for other solutions over the net, but this is how I did it so stick around to see my version).

The Desired Effect – Magnified

So, the desired effect in the end should look like the one in the example above, you can see that some letters are in front of the others and the light casted drops a shadow just enough to make them look like they are hanging there without a pin (some sort of a 3D effect)

Step 1 – Add some background

Let me show you how easy is to make something like this. Open PhotoShop and create a new document, 2000 x 1000 pixels with transparent background.

Rename the newly created Layer 1 in Background (or something to tell you that in this layer the background color will be painted) and using the bucket tool () add some color to the layer. I used #000d1b.

Step 2 – Add the Letters Using Individual Layers

In order to get the desired effect each letter from the word or phrase that we need to make must be separate in different layers because later on we will rearrange them to make the effect. I chose for my example the word MAKE and I have created the letters as I said in different layers like the image bellow.

Now using the Align Vertical / Horizontal Centers align them to be in the absolute middle of our document. I used a folder to do this after I aligned all the Text Layers to be on the same Bottom edge. The document should look like this now:

I used the Berlin Sans font for my example but you can use whatever font you like as long as it’s bolded and thick so you can make the effect more obvious.

Step 3 – Bring them all together

Now we need to bring the letters closer to one another and overlap them a little bit so we can do the magic afterwards. Use the SHIFT key (press and hold) to move them on a horizontal line so you won’t break the bottom alignment.

They should look like this now:

I’ve added a red stroke so you can better see what I’m talking about.

Step 4 – The True Power of “Drop Shadow”

You didn’t expect this right? Now go and move the A letter in front of all the other letters by dragging the layer on top of everyone. Go to Blending Options and select Drop Shadow. From the properties pane make the following changes:

Now select also Bevel Emboss and set the style to be Inner Bevel, softened to the max and the size to be only 5 pixels so we give the letter a smooth 3D effect. Also look at my Shading settings bellow and see how it looks like directly on the document, because these settings differ from the type of font you are using so be free to play along with this one.

Now press Ok and take a look at the document, can you see the difference? The A letter stands in front of the other and the shadow makes it look very cool.

And this is it, pretty Easy, right? Now to complete the effect, apply the same settings to the K letter using Copy Layer Style and Paste it over the K layer. To the other letters M and E you should only set the same Bevel and Emboss settings without the Drop Shadow effect and that’s it, you are done.

The Conclusion

Using just the basic settings from Photoshop and the very common drop shadow effect you can create very cool and interesting effects for you Typography. If you have a long word or a phrase try to play with the order of the letters and bring them in front of all the others until you get the desired effect.

You can also ditch the Bevel and Emboss effect and leave them as they are if you like them more like this, the effect looks very cool also without bevel so you can play with this settings also, I personally prefer the effect to be without Bevel and Emboss.

Agony este un program care genereaza imagini pe calculator prin repetarea unor curbe. Imaginati-va ca aveti  o functie matematica care deseneaza o curba pe plansa, acum luati plansa si rotiti-o intr-un punct fix sau pe o alta curba definita. Desi pare foarte greu de imaginat la inceput cum functioneaza, principiul este foarte simplu, iar rezultatele sunt cu adevarat impresionante.

Am descoperit prima oara programul cand eram in facultate, dar lipsa de interes si interfata foarte complicata m-au determinat sa renunt rapid la el. Acum dupa ceva ani in dorinta de a crea ceva care doar in capul meu exista si dupa ce am incercat putin Flame Painter (mai multe detalii aici) am zis ca trebuie sa revin si la Agony

Pentru inceput situl oficial este http://www.kelbv.com/agony.php de unde se poate descarca aplicatia. Este un soft mic ca dimensiuni facut in Delphi daca nu ma insel, dar foarte puternic.

Dupa ce il descarcati va sugerez sa urmariti tutorialele de la pagina special creata, pentru a invata interfata. Desi o sa para foarte greoaie la inceput (nu este tocmai User Experience oriented) o sa vedeti ca pe masura ce lucrati cu softul o sa va obisnuiti.

Nu o sa intru in foarte multe detalii pentru ca este mult prea mult de scris, vreau doar sa va arata ce am reusit sa fac eu in primele 10 minute de folosire.

Cateva imagini facute de mine: (daca vrei save-urile trimite-mi un mail.)

[Show as slideshow]

Din imaginile de mai sus (chiar daca nu sunt cele mai grozave ) cred ca putem sa ne facem o idee despre puterea lui Agony. Exista si un grup pe Flickr unde artisti si nu numai din toata lumea isi posteaza creatile facute cu ajutorul lui Agony (gasiti acolo exemple mult mai bune fata de ce am facut eu mai sus).

Sper sa va placa si spor la “desenat”.

that thing that keeps me awake even after 2 days without closing my eyes,
that thing who always want to make it better and better and it’s never good enough,
that thing that makes me want to not only “be good” but be The best.
that thing that modify your world and put crazy new ideas in your mind,
that thing that makes you hate yourself and one minute later makes you believe your the greatest.
that thing that makes you smile, laugh, dance, jump like lunatic.
that thing that often is not finished but is on your reel.
that thing that makes you be late.
that thing that puts you under pressure.
that thing that doesn’t obliges you to sit in there when you don’t want or you just don’t “feel good” to sit there and make what you need to do, but when you sit by yourself there that thing makes sure that magic happens. That thing that makes your heart crazy.
that thing that say “every detail matters”,
that thing that makes changes “here and there”,
that thing that when is finished you say “yeah… I like it” and months later you may say “wow, it is great” or “I can’t believe I was that bad”.
That thing that creates the impossible.
That thing that makes you climb the mountain and scream, “thank you!”.
That thing that impulse yourself to make a video for a competition where the possibilities are so few.
That thing that search the best quality.
That thing that keeps you up to date with ads, animations, webs, movies, music…
That thing that customizes all your stuffs.
That thing that screams and makes you to forget anything.
That thing that shows you the way to the most creative.

That thing…

So what’s that thing “THE THING”?
I cannot describe it in one word but I’m sure it’s not the money or the fame.

It is the love, the passion that God put in me of making something great, that makes you feel “something” when you get in touch with it, see it and hear it.
To produce something Innovative that makes a change or just catch your attention and make you smile, think, buy or just say “that’s original”.
That is the thing.

I believe there are no impossibles and I believe as Albert Einstein said once:

“I wish to do something Great and Wonderful,
But I must start by doing the little things like they were Great and Wonderful”
-A. Einstein

by:

Click here to view the embedded video.

Click here to view the embedded video.

Flame is a painting program, it belongs to my ‘I am Artist’ experimental project. I think with tools which inspires you, everybody can be an artist. You can try it here, change different brush settings and paint your own flame paintings. When you change background from black to white, palette changes from additive to substactive and the feeling of the painting is very different. It’s not easy to explain all brush parameters, so I leave this for your experimentation.

Flame Painter Main Screen

Build by Peter Blaškovič Flame is a Processing application that can make a simple mouse movement look like a 1000 brush strokes on a canvas. Basically your brush is transformed into a multiple particle elastic one that can fill your strokes like you would do it with lots of small brushes put together. The only and the most important difference here is that you can control the intensity, color, opacity and size of each of the brushes.

A tool like this used by the proper hand can generate some impressive results. Bellow are three of my own aberrations but you can check the gallery for cool ones here.

[Show as slideshow]

]]> http://radumicu.info/blog/2010/03/07/flame-painter-escapemotions/feed/ 1 http://radumicu.info/blog/2010/02/28/iograph-do-your-business-do-art/ http://radumicu.info/blog/2010/02/28/iograph-do-your-business-do-art/#comments Sun, 28 Feb 2010 10:33:15 +0000 Radu http://radumicu.info/blog/?p=1033 Moscow designer Anatoly Zenkov to brighten up the routine work made a really nice application called MousePath. It was a simple Java based tool that records your mouse movements and records all your paths drawing a line as it’s goes along running in the background.

Posting it at Flickr, the tool very quickly made some noise and everyone was trying to see what was too discover in the chaotic movements of their mouse. Some of us even called it ART

Now the tool has evolved from the little Java application to

IOGraph — is an application that turns mouse movements into a modern art. The idea is that you just run it and do your usual day stuff at the computer. Go back to IOGraph after a while and grab a nice picture of what you’ve done!

The tool works quite easy: Open, Press Start, Do your thing, Save the image…

And here are some examples of the end result

[Show as slideshow]

Typo - Wallpaper

Failing in my attempts to make some typography wallpaper.

Download – 1600 x 1200 | 1280 x 1024 | 1152 x 864 |

The expected outcome

The general idea was to try and add a link on the right side of the page that will appear and stick there after a  certain percentage of the page is scrolled down and when clicked will smoothly scroll the page back to the top. Also it’s mandatory that this should work on all major browsers (including IE).

Here is an example how this should look like (example working already on this page, just scroll down to see it)

The button and the placement problems

In order to add the button to the page we just need to add this code to our page just after the <body> tag:

<a href="#header-top">
<div id="back-top" style="display: block;"></div>
</a>

The DIV tag will be used to show our top link using a background-image (but you can use a text just as well) and the anchor will be used to link us to the top of the page (in this case by the most outer div tag with the #header-top id) .

Now the CSS code to style our Top button should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
border:none;
}

So we’ve set a background image that will be seen by the user, in order to get the desired effect and the position of our DIV is FIXED so that will stick in the bottom right corner when scrolling the page. DISPLAY = NONE to hide it until we scroll down inside the page and afterwards show it to the user.

All good now we can say, but after some testing in Internet Explorer we will see that in some versions POSITION:FIXED is not working at all (ex: IE6) or buggy on other versions (ex: IE7). In order to fix this we will have to insert some hacks in our CSS code (I won’t get more into this matter because it will be a really long article but you can search all about it). What we need to do is to add overflow:hidden to the code and this will be the easiest way to solve position problems that we may encounter, now the CSS code should look like this:

#back-top{
 background:transparent url(arrow-up.gif) no-repeat scroll 0 0px;
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 border:none;
 text-indent:-999px;
 height:32px;
 width:42px;
}

Now that our button is inserted to the page and styled to appear on the right side  we can go further with some mouse over css code and the java-script that will animate the button.

The mouse over css code could be like the one bellow. I just practically used a sprite image to show the default and hover effect of our button.

#back-top:hover{
 background-position:0 -32px;
 display:block;
 overflow:hidden;
}

Code used for the Top Link show / hide effect

The main idea is to bind the scroll event of the page and when a certain percent is scrolled down we just show the button to the user. If the user scrolls back to the top we need to hide the button once again. I used jQuery to do this and turned out in the process to be a plugin so we can use it wherever we want.

The plugin function will take 3 parameters:

• tag object of the button – the DIV used to show or hide the top link button (passed as the selector)
• min – Amount of pixels from the top needed to show the button
• fadeSpeed – The speed of the fade in / fade out effect set in milliseconds

We first declare the settings and the default values for each of them:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50 //used to properly calculate the height in IE
 }, settings);

Then we listen for the scroll event and we check the height from the top until it gets bigger then our min value, in witch point we show our button using the fade in effect. If the height from the top is smaller then our min value we will hide our button in the same manner.

 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

The jQuery.support.hrefNormalized means that using the jQuery features we are trying to detect browser features. The support object contains boolean flags and was added just for this purpose to write code using browser feature detection. Because IE has a different mode to handle the href attribute (it returns the full URL instead of the exact href attribute) I used .hrefNormalized to see if the code is executing in IE or not and if it does using css we are setting the top property every time the users scrolls the page, assuring us in this way that the position of our button remains constant without flickering or any other bugs we may encounter with different browsers.

Final code used to show / hide our button

The full code of our jQuery plugin should look like this:

jQuery.fn.topLink = function(settings) {
 settings = jQuery.extend({
 min: 1,
 fadeSpeed: 200,
 ieOffset: 50
 }, settings);
 return this.each(function() {
 //Listen for scroll
 var el = $(this);
 el.css('display','none'); //in case the user forgot
 $(window).scroll(function() {
 if(!jQuery.support.hrefNormalized) {
 el.css({
 'position': 'absolute',
 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
 });
 }
 if($(window).scrollTop() >= settings.min)
 { el.fadeIn(settings.fadeSpeed); }
 else
 { el.fadeOut(settings.fadeSpeed); }
 });
 });
};

Now in order to use the plugin using a separate js file (or in what way you may like) we add the code to our page and then we just call it when the dom is ready or at the end of the page right before the </body> tag:

// Go to Top Link
$('#back-top').topLink({
 min: 800,
 fadeSpeed: 500
});

According to our settings above the go to top button will appear after at least 800 pixels will be scrolled down from the page and the effect will be completed in half of a second. After the page scrolls back to top the code is executed again and the button will hide again because our min value is not reached.

Smooth scrolling all anchor links inside your page

For the smooth scroll effect I used another plugin made by Karl Swedberg that you can get from Github here. In order to use it just load the js file to your page and add the following code.

// All anchor tags will be bind to smooth scroll in page
$('a').smoothScroll();

Now all anchor tags inside your page will be smoothly scrolled when clicked. For example the Go to Comments link inside your blog, or any other anchor that points somewhere inside your current page will have this nice effect.

Final considerations

I’ve checked the code in FF 2.0 +, IE 7+, Opera 10, Safari 4 and Chrome 5 and works well on all of them. If anyone finds a version that breaks or is buggy just let me know and perhaps we could fix it. This article is not meant to be a tutorial for all users and some or more programming skills are required in order to integrate the code in your HTML pages but you don’t have to alter anything to it it works as it is. Hope you will find it useful and give feedback if you have some.

UI Honeycombbig

Am observat in ultima vreme o greseala (amestecare, confuzie) pe care o fac multi oameni cand se refera la doua concepte cu asemanari semantice, dar total diferite in ceea ce priveste conceptul si aplicarea.

User Experience vs Usability

Aceste doua “industrii” au inceput sa creasca si sa fie din ce in ce mai cunoscute odata cu dezvoltarea rapida a RIA (Rich Internet Applications). Astfel ca odata cu popularitatea aplicatiilor web acesti doi termeni au atins cote inalte in agenda fiecarui dezvoltator, dar in acelasi timp sunt percepute sau intelese gresit.

Usability se refera la usurinta cu care un utilizator poate duce la bun sfarsit un task folosind orice tool. In general acest termen are la baza analizele factorilor umani si include ideei din multe domenii cum ar fi psihologia umana si statistica. In fundament termenul de Usability este calitativ, dar se bazeaza pe datele cantitative pentru analiza si identificarea slabiciunilor si generarea solutiilor de imbunatatire.

Studiul de usability se face in general prin teste foarte detaliate si amanuntite cu esantioane/grupuri mari de oameni  pentru a determina cum interactioneaza utilizatorul cu interfata si zonele specifice unde el se pierde (cateodata se aplica metode care analizeaza miscarile ochilor pentru a determina zonele de interes majore).

“Highly usable interfaces” sunt intotdeauna acelea foarte intuitive, simple si extrem de usor de invatat.

User Experience in contrast cu Usability se refera la modul in care utilizatorul percepe interactiunea lui cu sistemul. Design-ul experientei inglobeaza in acelasi timp Design-ul Interactiunii cat si Design-ul Vizual si cauta sa promoveze o interfata care este placuta pentru utilizator.

Studiul de user experience se focuseaza in general pe impactul psihologic in interactiunea cu sistemul, astfel ca expertii in user experience isi petrec marea majoritatea a timpului facand cercetari etnografice si psiho-grafice pentru a putea construii interfata. User Experience este mai mult calitativa decat Usability, desi nu sunt in mod necesar exclusive intre ele.

Pentru o mai buna exemplificare putem sa luam exemplu site-ul Youtube. Vom incerca sa analizam putin player-ul pe care ei il folosesc in randarea streamurilor.

Nu de mult timp au lansat un update la UI-ul playerului cu pricina, au adaugat cateva optiuni – cea de a selecta calitatea streamului video intre controlul de volum de sunet si cel de extras.

Asa cum putem sa vedem in imaginea alaturata din punct de vedere al Usability pe o scala de la 1 la 5 putem sa ii dam player-ului nota 4, pentru ca avem toate cerintele necesare unui player: informatia legata de cat timp a parcurs streamul si cat are in total, butonul de volum, meniul de unde putem selecat calitatea streamului, butonul de expand in cazul in care vrem sa il facem mai lat si butonul de full screen in cazul in care vrem sa ne bucuram de imaginea full. Practic toate taskurile care vrem sa le facem cu un player sunt la indemana si nu parcurgem 100 de pasi pentru a putea ajusta un volum sau a selecta calitatea unui stream. Astfel ca avem USABILITY foarte bun.

Daca privim acum din perspectiva User Experience a playerului nostru interactiunea utiliztorului este “placuta” daca pot spune asa, iconitele folosite sunt sugestive (la volum am o iconita de difuzor nu un difuzor stilizat din care sa nu inteleg nimic), culorile sunt alese pe masura, dar…

Problema apare cand vrei sa schimbi volumul sunetului. Iconita este suficient de mare cat sa dai peste ea cu mouseu, dar este asezata langa una mult mai mare si foarte usor poti face hover peste cele doua, iar rezultatul cum se vede si in imagine este ca volumul este acoperit de cel de calitate a streamului si nu mai poti sa il folosesti. Astfel ca incepe sa devina frustrant pentru utilizator din cand in cand si atunci scorul nostru pentru User Experience scade la acest capitol.

Este foarte adevarat ca am cam tras de par acest exemplu (mai ales ca au si corectat acest bug in timp ce scriu eu articolul), dar importat este sa intelegm diferenta intre cei doi termeni de Usability si User Experience.

Pentru cei dornici de mai multa informatie am decat doua sugestii: una din ele este Internetul, doar un simplu search pe Google dupa Usability sau User Experience si o sa gasiti resurse mai multe decat va puteti imagina.

Al doilea este siteul celui mai cunoscut si influent om din domeniu Jakob Nielsen – useit.com pe care il recomand cu mare caldura celor care vor sa aprofundeze in domeniu.

In speranta ca marea majoritatea dintre voi petrec foarte mult timp in fata calculatorului si pentru ca multi nici nu stiu cum sa isi faca viata mai usoara din punct de vedere al sanatatii incercati in primul rand cand ajungeti la birou sau acasa in fata computer-ului din dotare sa va acordati cateva minute sa reflectati asupra conditiei voastre

Ma simt sau nu confortabil pe scaun in fata calculatorului?

Raspunsul trebuie sa fie simplu DA sau BA!

Aici intervine Ergonomia. Desi poate suna ciudat Ergonomia spatiului de munca este o stiinta care se ocupa cu design-ul jobului si echipamentului pentru a se potrivii cu muncitorul. Astfel ca de ce sa nu facem ceva in privinta acestui lucru reusind in acest sens sa ne imbunatatim viata si productivitatea in munca (cat de corporate suna, dar sa nu pierdem din vedere esenta).

Lista punctelor esentiale

Daca cautam putin pe net despre ergonomie si exemple gasim o gramada, unele mai detaliate altele mai simple, ce pierdem noi insa din vedere este faptul ca cele mai importante le putem face fara prea mult efort, astfel ca am agregat o lista cu cele mai importante si usor de facut aspecte in ceea ce priveste ergonomia noastra la locul de munca sau acasa…

Scaunul

Poate cel mai important obiect pe care il avem. Scaunul pe care stam in primul rand trebuie sa fie confortabil, sa iti inspire acel sentiment de plutire ca si cum nu ai avea nimic care sa te sustina, desi sentimentele acestea sunt “scumpe” investitia se amortizeaza in foarte scurt timp.

• Picioarele trebuie sa fie pe podea (lipite) si glezna la 90 de grade.
• Coapsele paralele cu podeaua si genunchii indoiti la 90 de grade
• Intre scaun si genunchi trebuie sa fie cativa centrimetrii liberi
• Coatele sa fie la 90 de grade cand se lucreaza la tastatura
• Lasate pe spate cat mai mult posibil in scaun, astfel o sa iti impui pozitia dreapta

Biroul

Conform ergotron.com biroul trebuie sa indeplineasca cateva caracteristici (eu le-am neglijat la inceput si am regretat mai tarziu cu dureri de tot felul si de mai multe intensitati).

• Inaltimea coatelor de la podea ne spune cat trebuie sa fie inaltimea biroului (coatele trebuie sa fie o extensie a biroului in momentul in care lucram la tastatura)
• Cele mai folosite obiecte de pe birou trebuiesc asezate cat mai aproape de maini astfel incat sa reducem ridicarea repetata a mainilor pentru a le folosii
• Birourile care au un Slider (tava care iese) pentru tastatura fara extensie pentru mouse sunt cele mai nepotrivite pentru lucrul la birou. Mainile trebuie sa stea la acelasi nivel mereu cand lucram.

Monitorul

Poate cel mai neglijat dintre componentele noastre.

• Distanta fata de monitor trebuie sa fie adecvata – lungimea unui brat este cea ideala (circa 50 cm)
• Daca iti permite seteaza monitorul la un unghi (pe verticala) de 10, 20 de grade astfel miscarea gatului va fi minima in momentul in care te uiti la el
• Capul trebuie sa fie intr-o pozitie neutra astfel incat doar ochii sa se miste, nu gatul
• Centreaza monitorul in fata ta, pentru a putea evita rasucirile din gat sau corp
• Linia perpendicula pe monitor de la ochi trebuie sa fie apropiata de partea superioara pentru a evita ridicarea gatului de fiecare data cand cautam continutul pe monitor
• Off – Topic – Refresh-ul monitorului trebuie sa fie de la 75Hz in sus, altfel daca este mai mic ochi vor percepe frame rate-ul foarte subtil si te vor durea (cum fac sa schimb refresh-ul)

Mouse si Tastatura

Deloc neglijabile aceste doua componente pe care le folosim cel mai des in activitatile noastre de zi cu zi.

• Relaxarea este punctul cel mai important, mainile si degetele trebuie sa fie relaxate tot timpul cand se lucreaza la tastatura sau cu mousele
• Mana care misca mousele trebuie sa fie la 90 de grade pentru a permite miscarea completa
• Incheieturile trebuie sa fie cat mai drepte cu putinta cand se foloseste tastatura. Este o conceptie gresita faptul ca stativele pentru tastatura sunt cele mai bune astfel ca aruncatile pe toate

Pauzele lungi si dese cheia marilor succese

Ochii obositi – Cornell’s Ergonomic guide spune ca “Every 15 minutes you should briefly look away from the screen for a minute or two to a more distant scene, preferably something more that 20 feet away. This lets the muscles inside the eye relax. Also, blink your eyes rapidly for a few seconds. This refreshes the tear film and clears dust from the eye surface.”

Stretching – Daca iti faci timp 5 minute si vrei sa rada si colegii de birou de tine poti sa iei in considerare putina gimnastica inainte de a incepe ziua de munca si de ce nu din cand in cand si in timpul zilei.

Surse informative

• Workspace Planner
• Cornell Ergo Guide
• CUergo: 10 Tips for Mouse Use
• World Wide Web si Experienta