MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Je vous ai déjà parlé de cette technique qui permettait d’avoir un résultat de toute beauté avec un moindre effort pour tous redimensionnement d’images et si vous ne voyez pas de quoi je parle, cliquez ici. On a meme vu un logiciel open source (Windows, Linux) qui utilise cette technique sous le nom de Liquid Resize.

Revoici une petite vidéo pour vous rafrichir la mémoire avec en haut le seam carving appliqué et en bas un resize normal.

YouTube Direkt

Et bien maintenant ces les plugins qui sont disponibles est cela pour 3 logiciels.

• Pour Flash (ActionScript)
• Pour Gimp
• Pour Photoshop

Voici une liste de 70 sites (des icônes aux banques d’images, des menus CSS aux validateurs.) qui vont vous permettre d’alléger et de faciliter votre travail que vous soyez professionnel ou amateur.

» lire la suite de l’article

Si vous ne connaissez pas encore Picsengine, vous pouvez découvrir l’interface actuelle de Picsengine ainsi que l’interface d’administration (login : demo, pass : demo).

Pour ceux qui connaissaient déjà Picsengine, la futur version 3 s’annonce superbe ! Il s’agit d’une galerie utilisant Flash, mais une version en Ajax est aussi disponible. On peut utiliser Iphoto pour envoyer ses images. Le support du plein écran est supporté. Pour les plus impatients, vous pouvez toujours essayer la version 2 en attendant..

» lire la suite de l’article

Le magazine Pulse ARTS devient totalement gratuit, ce magazine a était crée par Eric Caron, qui a longtemps œuvré dans le magazine Computer Arts.

Pulse ARTS, c’est un magazine 100 % numérique, édité au format PDF et dédié à tout les professionnels et passionnés de l’image. 80 pages d’ articles , de didacticiels, d’interviews d’artistes, de concours et galeries pour assouvir votre soif de connaissance. Une magazine 100% numérique, 100% professionnel qui aborde tout les aspects de la création assistée par ordinateur.

Il ne vous reste ça faire un tour sur le site Pulse ARTS pour télécharger le dernier numéro qui a été dédie à TRANSFORMERS

Stripemania est un outil simple a la Web 2.0 pour créer des rayures pour vos conceptions. Vous pouvez choisir la taille des rayures et l’espacement entre eux. Vous pouvez même ajouter des effets de dégradé couleur pour toutes vos rayures.

Ce n’est pas le premier site qui le propose, certes, mais voici une petite application, qui techniquement comme esthétiquement vraiment réussis, et peut vous servir à créer le papier peint de votre site, très simplement.

Vos créations son enregistriez dans la galerie du site et les internautes vote pour les plus belle création, il y a mémé des tutorials pour vous explique comme ajouté le fond dans votre site ou le refaire sur photoshop.

Coca cola viens de publier sur son site web toutes les afficher crées par des graphistes / illustrateurs. Pour exprimer le “Coke Side of Life”, une véritable mine d’inspiration.

Le site est très agréable (en flash) à visiter avec une navigation à la iPhone, le plus beau est que ces affiche son téléchargeables et leurs résolution peut aller jusqu’à 1280×1024, rien que ça. Thanks Coca cola for your generosity.

Vous connaissez les trois systèmes de diffusion vidéo en vogue : AppleTV, Joost & Babelgum.

Paul Yanez a reproduit ces trois systèmes, en Flash, avec beaucoup de réussite. Bien sûr, le contenu na rien à voir avec ce que AppleTV, Joost & Babelgum proposent; le contenu diffusé est issu des plus gros sites de vidéo en ligne, comme Youtube, Google vidéo, Metacafe, …

» lire la suite de l’article

Vous connaissiez IconFinder; voici un autre moteur de recherche d’icônes : Iconlet.
L’avantage notoire qu’il a sur iconfinder, c’est que l’on peut choisir sur quel type de licence on souhaite axer la recherche :

• Free!
• GNU Lesser General Public License
• Creative Commons Attribution-ShareAlike 2.5 License
• Creative Commons Attribution 2.5
• Eclipse Public License 1.0
• GNU General Public License
• Creative Commons Attribution-ShareAlike 3.0 Unported
• Creative Commons Attribution-ShareAlike 2.0

La deuxième avantage ce qu’il est possible de choisir la résolution de l’image, à rajouté dans son bookmarke ça peut être toujours utile

En a déjà vu comment créer un effet glace sur une image en utilisant un Js. Cette fois ci nous allons voir comment personnaliser les Checkboxes et les boutons radio des formulaires. Au fait je vais mettre une série de tutoriaux dont le sujet principal est la personnalisation des formulaires .

Cette personnalisation se base sur la bibliothèque mootools et un fichier CSS.

Images Utilisées :

chk_off.png	chk_on.png		rdo_off.png	rdo_on.png

Evidemment vous pouvez créer d’autres graphiques s’intégrant à votre design.

» lire la suite de l’article

Comme toujours je fais un tour sur le blog de dadou3x pour voir ce qu’il y avait d’intéressant et pour laisser un commentaire c’est là que je suis tombé sur un commentaire qui parlé d’un script js du nom de Glossy.js qui avait l’air vraiment utile surtout dans le cas ou vous n’avez pas beaucoup de temps ou que vous n’aimez pas trop le traitement des images c’est possible aussi :)

Ce script Js vous permet d’avoir un effet glace à la web 2.0, tout ce qu’il faut : image arrondie ainsi qu’un ombrage.

Donc j’ai décidé de faire un petit tutorial pour vous expliquer comment faire l’ajout et son paramétrage.

Premier partie : Ajout du Js Glossy.js dans votre site ou blog.

Téléchargez et placez le fichier Glossy.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head> :

<script type="text/javascript" src="glossy.js"></script>

Bien sûr faites attention au paramètre “src” qui indique l’emplacement du script.

Deuxième partie : Ajout de la class à votre image pour afficher l’effet

<img src="images/example.jpg" width="300" height="202" class="glossy" />

Paramétrage du style :
Pour changer le style d’arrondi pour l’image il faut ajouter et paramétrer la valeur “iradius25″ - min=20 max=50 par défaut =25

<img src="images/example.jpg" width="300" height="202" class="glossy iradius25" />

Pour enlever l’ombrage de l’image ajoutez le valeur “noshadow”. Par défaut l’ombrage est active pour l’image.

<img src="images/example.jpg" width="300" height="202" class="glossy noshadow" /><

Dans le site officiel vous trouvez d’autre d’informations sur ce script ainsi que d’autres scripts tel que corner.js; qui va vous permettre d’appliquer d’autres effets sur vos images.

N’hésitez pas à me laisser des commentaires après vos essais.

Cette démonstration concernant une nouvelle technologie de retouche d’image va vous étonner. Si vous avez déjà eu affaire à des tâches de changements de dimension ou de cadrage, vous allez immédiatement comprendre en quoi cet outil simplifie la vie considérablement, avec un résultat final qui va vous laisser bouche bée. Un conseil : allez jusqu’au bout de la vidéo pour voir toutes ses possibilités (je vous conseille de vous asseoir avant de visualiser la vidéo). Les documents de travail des 2 professeurs israéliens derrière cette trouvaille, Dr. Ariel Shamir et Dr. Shai Avidan, sont disponibles ici.

YouTube Direkt

Source : techcrunch

Smashing Magazine a édité une sélection de 45 webdesigns pour les blogs sous différents moteurs de blog (wordpress, Textpattern…) mais la majorité de la sélection est faite surtout à destination de wordpress que je trouve tout à fait normal vu que c’est la plateforme la plus utilisée. Je trouve cette sélection très belle même si je ne fais pas partie de la liste :)
Et là je vous présente mes préférés, ceux ou je pense qu’il y a un équilibre entre le design et l’ergonomie, à vous de me dire ce que vous en pensez avec un petit commentaire :)

» lire la suite de l’article

Il existait déjà de multiples outils de retouche photo en ligne (Picture2Life, Preloadr, PXN8, Snipshot, Fauxto), mais ils sont tous relativement difficile d’accès ou peu optimisés.
Picnik vient combler ces lacunes en proposant un outil en apollo (RIA) qui s’avère être d’une rapidité exemplaire.

Vous pourrez travailler sur des photos enregistrées sur votre ordinateur, prises avec votre webcam ou des clichés que vous aurez trouvez grâce aux modules de recherche intégré à l’outil : Yahoo Search et Flickr search.

Mais le must, c’est que PicNik vous permet de retoucher des photos que vous aurez préalablement télécharger sur votre compte FliCKr, Picasa Web, FaceBook ou sur tout autre site web, tel votre blog par exemple!. Et ça c’est vraiment utile!

Surtout qu’une fois que vos créations sont terminées, vous pourrez tout aussi facilement les sauvegarder sur votre pc/mac, sur votre compte Flickr, Picasa Web ou FaceBook, l’envoyer par mail ou l’imprimer.

» lire la suite de l’article

Ce tutorial va vous permettre de créer des boutons personnalisés pour vos formulaire ou autre.

Première étape :
Créer les différentes images composant le bouton.

bg_button_span.gif	bg_button_p.gif	bg_button_a.gif

Seconde étape :
Une fois votre bouton créer et découper il ne vous reste plus qu’à insérer le code CSS suivant dans votre page.

<style type="text/css">
<!--

.clear { 

   overflow: hidden;
   width: 100%;
}

a.button {

 background: transparent url('bg_button_a.gif') no-repeat scroll top right;
 color: #FFF;
 display: block;
 float: left;
 font: normal 12px arial, sans-serif;
 font-weight:bold;
 height: 34px;
 margin-right: 6px;
 padding-right: 18px;
 text-decoration: none;

}

a.button p {

 background: transparent url('bg_button_span.gif') no-repeat;
 display: block;
 margin:0;
 padding:0;

}

a.button span {

 background: transparent url('bg_button_p.gif') repeat;
 display: block;
 line-height: 24px;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;

}

a.button:active {    

 background-position: bottom right;
 color: #000;
 outline: none;

}

a.button:active p{

 background-position: bottom left;
 padding:0;
 margin:0px;

}

a.button:active span {

 background-position: bottom;
 margin: 0 0 0 18px;
 padding: 5px 0 5px 0px;  

}

-->
</style>

Troisième étape :
Appeler ou insérer le bouton dans votre page HTML par le biais de de la ligne de code suivante :

<a class="button" href="#" onclick="this.blur();"><p><span>Je suis le plus beau bouton du monde</span></p></a>

Cette petite manipulation CSS, va vous permettre d’avoir des boutons plus stylés que les boutons part défaut, je tiens juste a vous informer que ce ne sont pas des boutons de type formulaire (input) mais plutôt une personnalisation de la balise lien (A).

Résultat du tutorial :

Clipart deSIGN est un site proposant des ressources graphiques pour les professionnels. Le site propose bien entendu des packs d’images de qualité payants mais également des centaines de clipart vectoriels gratuits dans diverses catégories ! Les images vectorielles sont proposées au format AI (Adobe Illustrator), CDR (Coreldraw), EPS (Photoshop) et SWF (Macromedia Flash).

des centaines d’autres clipart vectoriels sur Clipart deSIGN.

Source : webstorming