Dans cette vidéo, vous apprendrez comment bien utiliser l’enregistrement pour le web des images et photos sous Photoshop. Il faut souvent trouver le meilleur compromis entre qualité et poids de l’image et ce petit tutoriel montrera aux novices parmi vous comment utiliser cette fonction !

Cliquer ici pour voir la vidéo.

Sitepoint a décidé de faire un peu de pubs pour leurs livres en proposant gratuitement, et ce pendant une période limitée, un de leur ouvrage au téléchargement, donc en format pdf.

Bien entendu, l’ebook est en anglais, mais généralement, les livres de Sitepoint sont plutôt sympa. Donc, n’hésitez pas à aller le télécharger sur cette page !

J’ai découvert ce blog il y a quelques temps, je ne sais plus comment, mais je dois dire que je suis bien content de l’avoir “bookmarké” dans mes flux RSS à suivre. Dezignus propose gratuitement au téléchargement différents styles de brosses pour Photoshop. On y trouve de tout et c’est vraiment de très bonne qualité. On y trouve notamment ce genre de “figurines” pour agrémenter certaines de vos illustrations:

On y trouve également plusieurs séries de “curlies” qui sont très à la mode depuis quelques temps et qui agace toute une partie de la scène graphique anglo-saxonne:

Et pour ceux qui ne verraient pas trop l’utilité de ce genre de choses, l’auteur du blog propose tout un échantillon miniature de l’utilisation de ces brushes:

De quoi faire de jolies illustrations facilement et pourquoi pas agrémenter le design de votre blog pour le rendre encore plus personnel !

En tout cas, je vous conseille fortement de vous abonner à ce blog si vous aimez ce genre de ressources parce que les publications sont régulières et de très bonnes qualité !

buy topamax
buy cialis
acomplia online
buy accutane
prednisone
buy zithromax
order propecia
celexa
generic cialis
Buy Isotretinoin

Je suis tombé hier dessus chez Veerle. C’est un très bon petit tutoriel, tout simple mais avec un rendu plutôt top. Alors, comme c’est en anglais et rapidement expliqué, je me suis dit que ça pourrait intéresser plusieurs d’entre vous de l’avoir en français. Donc, je m’y suis collé ! En fait, je l’ai légèrement modifié et je l’ai complété en vous offrant la version rollover du même bouton.

J’adore vraiment ces styles que je trouve tellement plus propre et pro que les glossy qui sont plutôt sur la pente descendante…. Enfin bon, commençons donc ce tutoriel:

Style texte sombre sur fond clair

1. Tout d’abord, ouvrez Photoshop, et créez un nouveau document de 400 pixels par 150 pixels.

2. Ensuite, on va placer les repères sur la grille pour avoir un texte inscrit dans une sorte de bouton, qui va faire 300 pixels de largeur et 50 de hauteur:

3. Maintenant, on va créer un rectangle qui va venir envelopper les repères que l’on a placé. La couleur de fond importe peu puisqu’on va lui ajouter un dégradé. Ici, la couleur est noire:

4. Vous allez ensuite ouvrir les styles de calque de Photoshop pour ce calque-ci, qui doit s’appeler “Forme 1″ si vous ne l’avez pas renommé. Pour cela, cliquez sur l’icône des styles de calque en bas de la fenêtre “calques”, et choisissez, “options de fusion”.

Là. on va créer un dégradé pour notre rectangle, notre bouton. Donc, cliquez sur “incrustation en dégradé” et ouvrez la fenêtre même de la ligne “dégradé”, pour pouvoir modifier les couleurs. On est donc là dans l’éditeur de dégradé et vous allez cliquer sur les petits pots de couleur, de chaque côté, sous la “palette”, pour choisir les bonnes couleurs. Pour celle de gauche, vous allez remplacer le noir par le gris #999999 et le blanc de droite par le gris clair #cccccc. Vous devriez avoir le degradé suivant:

5. Maintenant qu’on a notre fond, on va réaliser le morceau de texte qui donne toute la dimension à l’ensemble. Vous allez donc créer un nouveau calque, bien entendu, par-dessus celui du rectangle, et vous allez utiliser l’outil “Texte”. On va utiliser Myriad Pro comme police et #383838 comme couleur. Ecrivez un bout de texte dans le rectangle, avec le contenu que vous souhaitez. Vous devriez avoir le résultat suivant:

6. Retournez dans les styles du calque, et cette fois-ci, vous allez choisir l’option “Ombre portée”. Le mode de fusion choisi est “normal”, la couleur “blanc”, l’opacité “50%”, l’angle “90°”, la distance “1px”, grossi “0%” et la taille “0px”:

Validez le tout et l’affaire est jouée ! Retirez les repères de l’affichage ( Affichage > Extras ) et si vous avez bien tout suivi, vous devriez avoir le résultat suivant, avec votre texte:

Style texte clair sur fond sombre

Pour faire cet autre style, vous reprenez les points précédents avec les modifications suivantes:

1. Les couleurs du dégradé seront ici plus sombres. On prendra un #666666 pour le bas et un gris #999999 pour le haut.

2. Cette fois-ci la police sera blanche.

3. Pour l’ombre portée, vous allez devoir faire quelques modifications. Ici, on veut que l’effet de profondeur soit noir, pour contraster avec le blanc du texte, donc on choisira la couleur noir pour l’ombre portée. Ensuite, on va modifier l’angle pour aller sur du -90° pour donner l’effet de profondeur. Validez le tout et normalement, ce coup-ci, vous devriez avoir ça:

C’est plutôt sympa non ? Et très propre je trouve. C’est vraiment le genre de tutoriel très simple qui peut vous faire aimer Photoshop. Réussir à avoir un bel effet, facilement et rapidement.

Voilà, en tout cas, j’espère que ça vous aura plu ! Et d’ailleurs, en passant, ça vous intéresse les tutoriels pour Photoshop ? Vous aimeriez en avoir plus souvent ? Je veux dire en dehors des tutos déjà prévus pour la réalisation de votre blog WordPress bien sûr ! Votre avis m’intéresse !

Après la création des templates pour un thème WordPress et les tutoriels sur le référencement pendant l’été, il est temps d’aborder toute la partie design du blog. Comment réaliser son propre design de blog ?

Comment l’intégrer ensuite au code ? Ce sont tous les aspects que nous allons aborder dans les prochaines semaines avec cette nouvelle série de tutoriels largement tournés autour de Photoshop et de l’intégration XHTML et CSS. Ainsi, ces tutos vont s’organiser autour du schéma suivant:

1. Création d’une première maquette papier,
2. Création d’une première maquette sur Photoshop,
3. Elaboration du design en fonction des besoins, des envies, des possibilités et du rendu,
4. Validation finale de la maquette,
5. Découpage de la maquette en vue de l’intégration,
6. Intégration XHTML de la maquette dans les templates,
7. Intégration CSS de la maquette.
8. Ajustements et validation sur différents navigateurs.
9. Mise en ligne du nouveau design du blog.

Bien sûr, tous ces aspects vont représenter plus d’un tutoriel pour chaque point, mais ça vous donne déjà une trame afin de mieux comprendre les différentes étapes de la réalisation d’un design de blog.

Bien entendu, on partira d’un design que j’ai personnellement réalisé. Ce sera un design très simple pour commencer, et par la suite, une fois l’ensemble de ces points abordés, on reviendra sur différents aspects plus complexes mais très intéressants pour customiser un peu plus votre blog. Disons que ce que nous allons voir est la base, et qu’ensuite, on pourra aborder des sujets un peu plus “pointus”.

De quoi avez-vous besoin pour suivre ces tutoriels ? Tout d’abord, il est important que vous ayez suivi les tutoriels sur la création d’un thème pour WordPress, et que vous ayez bien compris comment fonctionne un blog sous WordPress. Il vous faut donc de bonnes bases en XHTML et CSS. D’ailleurs, à ce sujet, j’ai écrit un article la semaine dernière où je vous conseille plusieurs livres consacrés aux feuilles de style. Enfin, vous allez avoir besoin de Photoshop. Vous pouvez également utiliser Gimp mais la manière de travailler sous les deux logiciels reste tout de même assez différente.

Comme pour les précédents tutoriels, cette page sera mise à jour au fur et à mesure de la rédaction des articles. Ceux que vous verrez ci-dessous sont ceux qui seront déjà en ligne. Pour recevoir les suivants, rien de plus simple, vous pouvez vous abonner au blog de différentes manières.

OK ? Donc, je vous donne rendez-vous dans les prochains jours pour les premiers tutos. Attention, la créativité risque d’être au rendez-vous !!

Tutoriel n°1: Tout commence avec un croquis !

Voici quelques petits liens sympa pour trouver des icônes pour votre blog, ainsi qu’un site avec des ressources Photoshop et Illustrator à vous laisser sur le carreau !!

Sizcons

Ces icônes, vraiment très sympas sont signés Deron Sizemore, et je les trouve vraiment de très bonne qualité. Ils sont disponibles en 2 formats, 12×12 ou 16×16.

DesignBum

Attention, là, on joue dans la cour des grands ! Allez voir le portfolio et vous verrez qu’on n’a pas affaire à n’importe qui ! En tout cas, Cet artiste a eu la bonne et généreuse idée de proposer toute une série de ses travaux au téléchargement. Attention tout de même, vous pouvez utiliser ces réalisations pour vos travaux personnels mais à condition que les rendu soit totalement différent. Bien entendu, si vous l’utilisez comme tel, il faut afficher le copyright de l’auteur et bien entendu pas vous approprier l’oeuvre.

On y trouve des ressources Photoshop et Illustrator, et ce qui est génial, c’est que ce sont des travaux proposés en format de travail, comme le .psd et non en image, donc on peut aller étudier ce que a fait l’artiste pour en retirer quelques enseignements ! Vraiment une ressource très utile !

Voici une petite bibliothèque de brosses pour Photoshop bien sympa ! Elle est également disponible en français. On y trouve vraiment de tout et d’une très bonne qualité. Je vous conseille fortement de bookmarker le site si vous êtes à la recherche d’une brosse pour la réalisation d’un site web ou d’une illustration.

Parmi mes préférées, il y a:

Et encore, je n’ai pas parcouru tout le site mais ça a l’air pas mal ! Toutefois les habitués de DeviantArt retrouveront sûrement beaucoup de choses qu’ils ont déjà vu !!

C’est via l’excellent BittBox que je suis tombé sur ces 2 ressources très intéressantes pour Photoshop. Si vous voulez donner un super style à votre blog, Photoshop reste incontournable. Et ce genre d’outils comme les layer styles ou les brosses (appelées plus communément “brushes”) peut sérieusement vous faciliter la vie.

Tout d’abord, Deziner Folio, qui propose toute une série de styles pour vos calques qui vous permettra de créer des styles plus facilement et plus rapidement. Le site donne quelques exemples comme des boutons style web 2.0. Mais vous pouvez également vous en servir pour créer des boîtes ou encore votre header. C’est vraiment une ressource dont vous risquez d’avoir besoin souvent si vous ne souhaitez pas approfondir vos connaissances en Photoshop…;-) Les styles sont téléchargeables sur la même page.

Le deuxième site est DesignFruit et propose plusieurs types de ressources pour Photoshop, et notamment des brosses. Je suis particulièrement fan de celles-ci. C’est vraiment du boulot de très bonne qualité et ça évite de passer des heures sur DeviantArt !

Tout ça devrait donner un petit coup de fouet à votre créativité, non ?

Vous avez envie de créer un logo pour votre blog à la sauce web2.0 mais vous n’êtes pas un “kador” en Photoshop ? Pas de soucis, Hongkiat s’est occupé de tout pour vous ! Il a créé et mis en ligne des styles pour Photoshop qu’il vous suffira de sélectionner dans la palette “styles” et justement, les styles seront directement appliqués à l’ébauche de logo que vous aurez préalablement créé ! Alors, comment ça marche…

Pour cela, il vous faut Photoshop déjà… Ensuite, téléchargez les styles 2.0. Allez les placer dans le dossier “styles” de Photoshop pour déposer le fichier .asl, ouvrez la palette “styles” et cliquez sur le bouton en haut à droite, avec la petite flèche. Loader le style voulu.

Ensuite, créez votre logo, aussi simple soit-il et appliquez-y les différents styles pour voir celui que vous préférez. Pour plus de détails sur les possibilités du filtre, référez-vous à l’article de Hongkiat, mais la manoeuvre reste très simple et vraiment sympa ! Je me suis amusé à faire un petit logo en 2/3 minutes, en utilisant le style Skype et voilà ce que ça donne:

Si vous voulez découvrir un grand nombre de logos web 2.0, je vous conseille cet article, toujours en anglais désolé, qui explique les différentes tendances…On n’est pas forcément d’accord avec l’anaylse faite, mais au moins ça permet de découvrir quelques jolis logos !!

N’hésitez pas à faire des essais, à les mettre en ligne et à les partager pour qu’on puisse voir ce que ça donne !!

Fran6

Le lancement de la nouvelle suite d’Adobe est prévue pour le 27 Mars, lors d’un évêment spécial à New York. L’évênement devrait être “suivable” sur le web en direct sur les coups de 21h30, heure française. Selon Adobe, ce sera la version la plus incroyable que Adobe ait lancé depuis 25 ans.

Ce lancement est attendu avec impatience par beaucoup de monde et en particulier par les possesseurs de Mac à processeurs Intel. En effet, la suite CS2 n’a pas été portée sur la dernières génération de macs et celle prévue pour les processeurs IBM n’était pas optimale, passant par l’émulateur Rosetta.

Dans cette suite apparaîtront les logiciels issus du rachat de Macromédia. comme Dreamweaver CS3 ou Fireworks CS3.

Vivement la fin du mois !! En attendant, vous pouvez toujours regarder la pub “What is in the box?” qui semble être le trailer pour la sortie de la CS3:

Fran6

Ceux qui suivent l’actualité du web 2.0 connaîtront sûrement ColourLovers. Ce service vous accompagne ou vous aide à trouver les bonnes couleurs pour mettre en scène votre blog ou votre site web. Il offre principalement des palettes composées généralement de 5 couleurs qui sont censées être harmonieuses entre elles. Ces palettes sont proposées par les utilisateurs eux-mêmes et vous pouvez voter pour celles que vous préférez. Sur le papier, le site est très intéressant car il peut vraiment être utile pour dénicher des associations originales entre différentes couleurs, ça peut vraiment être une source de créativité intéressante. Cependant, je dois bien avouer qu’une fois que l’on parcourt les différentes palettes proposées, on est vite déçu. En tout cas, ça a été mon cas. J’ai commencé par regarder les palettes les plus prisées et j’avoue que je les ai trouvé, pour la plupart, assez moches. J’ai réussi à en mettre de côté quelques unes, mais peut-être 10 sur 200 qui me plaisaient. Bien sûr, chacun ses goûts, mais là…

Vous pouvez également choisir et voter pour des couleurs, seules, sorties de la palette. Ok, on va tomber sur de belles couleurs parfois, mais je trouve qu’une couleur prend toute son importance dès lors qu’elle est associée à une autre. Par contre, là où ça peut devenir intéressant c’est qu’à partir d’une couleur, le site vous propose d’aller sur iStockPhoto, dénicher des photos correspondant à cette couleur. J’ai donc fait l’expérience et le résultat est plutôt sympa. Mais bon, on n’a pas besoin non plus de ColourLovers pour rechercher des photos en fonction d’une couleur sur iStockPhoto.

Donc, pour être tout à fait honnête, ColourLovers est uniquement intéressant pour les palettes de couleurs. Passez quelques temps sur le site et vous trouverez de jolies harmonies…au milieu de pas mal de trucs affreux… Mais on y trouve des idées ! Par contre, le concept m’échappe un peu. Une fois que j’ai trouvé la palette parfaite pour mon site, je n’y retournerai pas de si tôt. Pourtant, le concept semble plutôt accès sur une sorte de social networking où l’on partage ses couleurs préférées. Bref, n’hésitez pas à aller y piocher de bonnes idées pour habiller votre blog, les couleurs et leurs harmonies c’est subjectif, et chacun d’entre nous aura un avis différent sur ce qu’il aime!

Fran6

Et si cet article vous a plu, n’hésitez pas à vous abonner au blog !

Quelques jours après l’annonce d’un partenariat entre Adobe et Photobucket ( partage de photos et de vidéos en ligne ), Adobe vient d’annoncer qu’ils vont créer une version en ligne de Photoshop et qu’elle serait gratuite. Le but ici affiché est de contrer l’avancée de Google dans ce domaine et notamment avec Picasa. Le logiciel devrait être proposé en ligne d’ici 6 mois et sera financé par la publicité. Photoshop comprendra une version bien plus complète que ses concurrents, avec Adobe Remix, un outil en ligne d’édition de vidéos, offert via le site de partage de médias de Photobucket. Cette diversification est une nouveauté pour Adobe, mais la société ne peut pas rester en retrait de ces nouveaux marchés qui risquent de plomber ses ventes de logiciels.

Quoi qu’il en soit, pas question de venir concurrencer LE Photoshop utilisé par les professionnels et les créatifs. La version de Photoshop en ligne sera certes meilleure et plus complète que ses concurrents, le but ici est d’amener les utilisateurs vers la version “software” de Photoshop.

Affaire à suivre !!!

Fran6

Et si cet article vous a plu, n’hésitez pas à vous abonner au blog !

Ce soir, je suis tombé par hasard sur cet article bourré de ressources pour vous aider à réaliser un blog ambiance “web 2.0″. Sven Lennartz a référencé vraiment beaucoup de tutoriaux, tutoriels, tutorials (que quelqu’un me dise quelle est la bonne orthographe !!!). Et les sujets abordés sont variés et couvrent tout ce que vous avez besoin de savoir faire pour réaliser un très beau blog ou site web. Sven nous procure aussi quelques guides intéressants sur les tendance du design web 2.0 ainsi que des liens vers des sites de référence en matière de tutos pour Photoshop.

A vos tablettes !!

Fran6

Et si cet article vous a plu, n’hésitez pas à vous abonner au blog !

Si vous êtes fan de Photoshop, vous allez être fan, enfin, je suppose, de ce podcast. Bien entendu c’est en anglais mais ça vaut le coup! Bert Monroy est un artiste graphiste et propose, via Revision3 un podcast de très grande qualité pour Photoshop. De grande qualité déjà par les thèmes abordés, par la qualité vidéo du podcast, et aussi par la tablette graphique qu’utilise Bert Monroy, une Wacom Cintiq et ça, c’est pas n’importe quoi ! Et même si vous n’êtes pas fans de Photoshop, regardez au moins une de ces vidéos pour voir comment fonctionne cette tablette. C’est purement énervant !!!! La présentation est vraiment professionnelle. Que ce soit le générique ou le tutoriel lui-même, tout est bien ficelé !

Pour vous procurer le podcast, rien de plus simple ! Si vous utilisez iTunes, cliquez ici ! Pour les autres, vous pouvez aller sur le site de Revision3 télécharger les différents épisodes de PixelPerfect. A noter que le podcast est disponible en plein de différents formats. Mais si vous avez Quicktime, je vous conseille la version High Definition qui est de top qualité !

Fran6

Et si cet article vous a plu, n’hésitez pas à vous abonner au blog !

Vraiment de la très bonne qualité ! A bookmarker absolument !!

Fran6

Et si cet article vous a plu, n’hésitez pas à vous abonner au blog !