Tous les articles dans Freebies

Photoshop Style Guide .PSD (et workflow)

[Freebie] Photoshop Style Guide

Voici le fichier Photoshop de mon style de guide de projets web. Vous avez été plusieurs à me demander ce que j’y met, je me suis dit que je pourrais tout aussi bien vous partager le fichier .PSD. I contient des instructions de couleur, de typographie responsive, des boutons et éléments de formulaire dans les états normal, active, survol, des tableaux, alignements d’images, etc.Lire la suite

[Freebies] Illustration Stratégie Responsive vs Mobile First Responsive

[Freebies] Illustration Stratégie Responsive vs Mobile First Responsive

Le mot ” Responsive ” veut aujourd’hui dire beaucoup de choses. Dans son article Responsive Strategy, Brad Frost nous explique la différence entre un site qu’il appelle ” Responsive Retrofitting ” et un site ” Mobile First Responsive Design “. Dans le premier cas, il s’agit de prendre un site conçu dans sa structure, son code et son ergonomie pour des grands appareils et de le ” rendre ” responsive après coup (en supprimant les largeurs fixes, utilisant des grilles fluides, …Lire la suite

[Freebies] Template de zones cliquables au touch (mobile, tablette, hybride)

[Freebies] Template de zones cliquables au touch (mobile, tablette, hybride)

Pour ma présentation et les cours à l’université j’avais besoin de montrer différentes utilisation de mobile, tablette et appareils hybrids au touch. J’ai donc créé ce petit pack de templates. Les données utiliser pour dessiner les différentes zones se basent sur les lectures suivantes : Responsive Navigation: Optimizing for Touch Across Devices par Luke Wroblewski How Do Users Really Hold Mobile Devices? Le chapitre “Designing For Touch” que Josh Clark a écrit dans le Mobile Book de Smashing Magazine En plus des zones, vous …Lire la suite

[MAJ] Template Photoshop et Illustrator d’appareil mobile et desktop

Template .PSD et .AI d’appareil mobile et desktop

Pour des besoins de présentation de travaux et différentes slides de conférence et cours, j’ai mis à jour mon Template .PSD d’appareil mobile et desktop La nouvelle version propose en plus des ressources d’appareil mobile, tablette et écran d’ordinateur au format de formes .PSD les améliorations suivantes: une icône d’ordinateur portable (laptop) une version des appareils iOS au format vectoriel disponible en .EPS opur Illustration des versions pré-découpées des appareils vectoriels au format .PNG   Vous pouvez  téléchager tous les fichiers …Lire la suite

Traduction “Responsive Webdesign – présent et futur de l’adaptation mobile”

Illustration “Content is like Water” et traduction “Responsive Webdesign – présent et futur de l’adaptation mobile”

La traduction Vous avez été nombreux à très rapidement me demander par mail et twitter une traduction de “The State Of Responsive Web Design“. Après de longues heures de traduction et surtout une grosse relecture de mes collègues, la traduction est disponible en ligne sur alsacréations : Responsive Webdesign – présent et futur de l’adaptation mobile Nous avons essayé de rajouter des liens vers des ressources françaises dans l’article, mais beaucoup des liens de base restent vers des sites anglophones. …Lire la suite

Template .PSD d’appareil mobile et desktop

templates très minimalistes d'appareils mobiles, et d'un écran de bureau : Galaxy Nexus et Nexus 10 pour Android, iPhone et iPad pour iOS.

Pour des besoins d’une présentation de travaux responsive, j’ai créé des templates très minimalistes d’appareils mobiles, et d’un écran de bureau : Galaxy Nexus et Nexus 10 pour Android, iPhone et iPad pour iOS. Il s’agit un fichier .PSD, chaque appareil est composé de calque de formes vectorielles pour pouvoir changer facilement la taille sans perte. Vous pouvez  téléchager le fichier Photoshop ici : (L’utilisation de cette template est sous licence CC BY 2.0, vous pouvez l’utiliser à des fins …Lire la suite

Pack de 30 icones sociales pour webdesigners et développeurs

J’ai publié ce matin sur Onextrapixel le pack complet d’icônes social, une grosse mise à jour de ce pack. Il comporte désormais 30 icônes de réseaux sociaux dans trois tailles (39x40px, 58x60px et 77×79). Ces réseaux sociaux sont à la fois ceux que j’utilise en tant que webdesigner/developpeur, mais aussi ceux qu’on m’avait demandé en plus sur G+.   Vous pouvez voir l’article sur Onextrapixel, ou les télécharger le pack de 30 icônes sociales directement depuis leur site. Ces icônes ont …Lire la suite

Template PSD pour nouvelle bannière GooglePlus

J’ai mis à jour mon profile GooglePlus avec la nouvelle bannière, et j’ai crée une template pour pouvoir mettre à jour plus facilement dans le future. Comme elle pourrait être utile à d’autres, je vous la met à disposition en téléchargement. La nouvelle bannière a pour dimensions 940 x 180 px, mais une partie est cachée sous la flèche de gauche et rognée à droite. Vous n’aurez qu’à placer votre bannière dans le calque  “create banner here” et l’image de …Lire la suite

Android script Photoshop pour exporter en ldpi, hdpi et xhdpi.

[UPDATE] Ces actions sont dépassées, j’ai fais une mise à jouer disponible sur l’article Android Photoshop actions to export to mdpi hdpi xhdpi xxhdpi and xxxhdpi En général quand je crée une application, je pars du mdpi, du coup, pour suivre les guidelines android, il faut re-créer tous les drawables en ldpi, hdpi et xhdpi. C’est assez long et fastidieux.  Il existe des outils en ligne qui vous permettent de générer les différentes tailles à partir de png comme Asset studio, …Lire la suite

Inpixelitrust pack gratuit d’icônes sociales V2

Le sympathique Alexis Petitprez m’ayant invité sur dribbble, c’était l’occasion d’une update-redesign de mon pack d’icônes sociales, incluant cette fois ci, l’icône dribbble. Comme pour la version précédente, vous pouvez télécharger gratuitement le pack d’icônes pour Twitter, Facebook et GooglePlus  Linkedin, Viadeo, Forrst et DeviantArt avec en plus cette fois ci celle pour dribbble. Les icônes ont été redécoupées sous photoshop et leur taille à changé de quelques pixels comparés à la version précédente. Les icones sont disponibles en trois …Lire la suite