TitaXium

[Documentation] Réaliser une interface web sous Photoshop

TitaX — Mon, 12 May 2008 09:00:00 +0200

La création d'interface graphique pour un site web est souvent un exercice difficile dans lequel il faut maitriser beaucoup d'outils spécifiques à Photoshop mais aussi avoir une vision précise de l'interface de nous voulons créer afin de faciliter son intégration pour le futur développeur qui devra s'occuper du découpage de l'interface.

Plusieurs facteurs sont donc à prendre en compte aussi bien sur l'harmonie des couleurs, la disposition des blocs mais aussi la faisabilité de la découpe de votre futur interface, nous allons vous présenter comment réaliser une interface simple, facile à découper et qui pourtant répondra à la majorité des cahiers des charges de vos demandes en interface graphique de site web.

Cette documentation tout d'abord au débutant mais pourra aussi convenir aux utilisateurs de Photoshop plus aguerri.

Pour cette documentation nous aurons tout d'abord besoin de ces deux images qui seront utilisées pour le haut de l'interface (header) et le bas de l'interface (footer) :

Créez un nouveau document de 1000*600 pixels et remplissez le en blanc.

Créez un nouveau calque "motif" et remplissez le avec ce motif :

Vous devez donc avoir deux calques comme ceci :

Créez un nouveau calque, que vous appellerez "body" (au dessus du calque "motif").
Sur le calque "body", faire une sélection rectangulaire (M) de 692px de largeur et 600px de hauteur. Remplissez la sélection de blanc.
Cliquez droit sur le calque "body" puis Option de fusion et ajouter une ombre portée de 36% d'opacité, distance 0, grossi 0, taille 6, d'un angle 90°.
Puis valider !

Créez un nouveau calque "header", insérez l'image "header" et mettez celui-ci en haut du calque "body".

Créez un nouveau calque "dégradé". Faire une sélection, remplissez de blanc puis aller dans les options de fusion et mettez les mêmes valeurs que sur l'image ci-dessous :

Pareil pour l'ombre portée :

Dupliquez le calque "dégradé" puis mettez le en bas du design.
Importez l'image "footer" et mettez là en dessous du calque "dégradé copie".

Et voilà, le design est enfin prêt à être découpé !

A vous de jouer maintenant, vous avez toutes les cartes entre les mains

(Merci à Freak. pour la rédaction de cette documentation)

Sélection du mois de mai 2008

TitaX — Fri, 09 May 2008 19:55:00 +0200

En mai fait ce qu'il te plaît !
Ce mois-ci TitaXium vous propose une sélection de 5 sites au design très soigné et pour lesquels nous avons eu un vrai coup de coeur.

Vous aussi vous connaissez un site au graphisme très élaboré ?
N'hésitez pas à nous le faire savoir via les commentaires

Le blog de Michaël Villar : http://blog.nemstudio.com/

Le magasin de magie : http://www.marchanddetrucs.com/

La tour de la terreur : http://www.disneytowerofterror.com

Le site de The Malthouse http://www.ilovedust.com/

Le site de Site Insaat : http://www.siteinsaat.com/

[Documentation] Les bases de la colorisation sous Photoshop

TitaX — Thu, 08 May 2008 09:30:00 +0200

Parmis les multiples possibilités du logiciel Photoshop, nous en avons une souvent utilisés mais rarement maitrisée, celle de la colorisation où comment remplir son dessin fait à la main en noir et blanc avec de jolies couleurs pour lui donner une vie et un réalisme plus grand.

Cette documentation présentera les bases de la colorisation à tous les dessinateurs débutants souhaitant évoluer rapidement et présenter des créations originales de meilleure qualité avec un rendu parfait.

Présentation des outils nécessaires

Voici les différents outils dont vous aurez essentiellement besoin pour coloriser :

Outil pinceau (pour mettre une couleur)
Outil doigt (pour étaler une couleur)
Outil baguette magique (pour faire une sélection d’une zone)
Outil pot de peinture (pour remplir une zone d’une couleur)

Vous pourrez aussi avoir à utiliser d’autres outils de manière occasionelle, mais ceux-ci seront vraiment indispensable

Etape 1 - La couleur de base :

Tout d’abord, veuillez à ce que votre lineart (le contour de votre image sans aucune couleur) soit net, comme celui-ci :

Créez un nouveau calque (CTRL+MAJ+N) que vous appellerez « Clair » par exemple.
Revenez sur le calque de départ et sélectionnez toutes les zones que vous voulez faire avec la première couleur grâce à l’outil Baguette Magique, maintenez la touche MAJ enfoncée pour sélectionner plusieurs zones à la fois, vous devriez arriver à quelque chose comme cela :

Puis revenez sur le calque Clair et appliquez votre couleur avec l’outil Pot de Peinture. Changez ensuite le mode de fusion si nécessaire, en mode Produit par exemple on obtient un meilleur rendu. Vous devriez avoir un rendu tel que celui-ci maintenant :

Maintenant, nous allons passer aux ombres.

Etape 2 - Les ombres :

Pour donner un bon effet d’ombre, l’idéal est de prendre comme couleur de base le noir #000000. Créez un nouveau calque que vous appellerez « Ombre », changez son mode de fusion, personnellement j’utilise essentiellement les modes Produit ou Lumière Tamisée 20 ou 30% d'opacité.

Maintenant, prenez l’outil Pinceau, vous allez faire CTRL+Clic sur le calque Clair pour le sélectionner tout entier.
A partir de cette sélection, vous allez étaler le noir là où vous pensez mettre votre ombre, tenez compte de là où vous pensez que se trouve votre source de lumière, soyez cohérents, par exemple, si votre lumière vient de la droite, la partie gauche sera ombrée. Voilà ce que cela donne :

Ici par exemple nous avons placé les ombres de sorte à ce que la source de lumière soit derrière la lionne au dessus d’elle.
Vous allez maintenant utiliser l’outil Doigt pour adoucir vos ombres, réglez le de la manière suivante : Mode: Normal, Intensité: entre 40 et 50%.
Passez votre doigt sur vos zones d’ombre, et essayez de faire des contours harmonieux, suivants les formes du corps. Vous devriez obtenir quelque chose de ce style après quelques essais infructueux (pour annuler une action, faites CTRL+Z, ou pour plusieurs actions, CTRL+ALT+Z) :

Vous pouvez ajouter de nouveaux calques d’ombre par-dessus le premier pour faire des ombres plus réalistes :

Passons maintenant aux lumières.

Etape 3 - Les lumières :

Pour les lumières, créez un nouveau calque, appelez-le « Lumière » et passez-le en mode Lumière Tamisée ou Incrustation, n’hésitez pas à changer son opacité aussi.

Prenez maintenant du blanc #FFFFFF et procédez comme pour les ombres, étalez donc votre blanc sur la zone où vous pensez mettre vos lumières, et soyez toujours cohérents.
Comme pour les ombres vous pouvez rajouter plusieurs niveaux de lumière après avoir fini le premier.

Au final voilà ce que cela peut donner :

Nous ne pouvons vous apprendre comment vous servir des outils évoqués, cela vient avec le temps et l’expérience, mais vous avez maintenant la méthode
Bon courage

(Merci à Hikawa pour la rédaction de cette documentation)

[Documentation] Utilisation des couches sous Photoshop

TitaX — Wed, 07 May 2008 08:55:00 +0200

Les couches sont très utilisées sur Photoshop lors de retouche photographique, mais aussi lors de création d'interface pour donner un effet sur une portion d'image.
La maitrise de l'utilisation des couches est indispensable à la bonne réalisation d'une création quelque quelle soit, même les plus simples.
Cette documentation vise donc tous les débutants pour qui les couches sont encore un outil secret que son utilisation relève du mystère.

Les couches sont comme une sélection et s'utilisent de la même manière, voyons cela d'un peu plus près.

Quels sont les avantages ?

Vous pouvez enregistrer une selection,donc vous pouvez en faire autant avec les couches, les enregistrements ne sont pas limités. .

Vous pouvez faire une selection avec un effet de fondu,comme pour les masques, la difference est qu'un masque sert à masquer une zone alors qu'une couche sert à tout sauf à masquer,donc vous pouvez :

- Ajouter des filtres
- Faire des reglages de l'image (niveaux, balance de couleurs, courbes...etc...etc)
- Effacer
- Déformer

Comment ca marche ?

Comme les masques, les couches fonctionnent avec le niveaux de gris :

Blanc : zone visible
Noir : zone qui ne vais pas partie de la sélection
Gris : Sélection avec de l'opacité

Pour les masques, le noir sert à cacher, donc dans les couches, tout ce qui es blanc sur la couche est visible ,c'est la zone sélectionnée.

Par défaut, le panneau de couches se trouve à coté du panneau de calques, si vous ne le trouvez pas, allez dans BarreMenu > Fenetre > Couches

Vous pouvez créer une nouvelle couche (comme indiqué sur l'image)
Donc maintenant qu'elle est créee, un nouveau calque apparaît (Alpha 1).
Vous pouvez distinquer que c'est noir, donc par défaut, rien n'est sélectionné.

Si vous prenez par exemple, l'outil Pinceau de couleur blanche et disons en dureté 100%, la zone que vous aurez dessinée sera une sélection.

Comment récuperer cette selection ?

En étant sur le panneau calques, vous allez dans BarreMenu > Selection > Récuperer une sélection

A partir de là vous aurez une petite fenêtre :

Document : votre document
Couche : la couché créee, dont "Alpha 1"
Inverser : la zone de sélection, sera inversée, donc ce qui était dessiné en blanc avec le pinceau, deviendra noir et le noir deviendra blanc.

Donc en cliquant OK, vous aurez une sélection de la zone que vous avez dessiné en blanc.

Maintenant je vous conseille de refaire toutes les étapes, mais au lieu de dessiner avec le Pinceau, tracez un dégradé du noir au blanc, il va me servir à faire des effets sur une image que nous avons choisi : la Boite TitaXium

Nous allons créer un degradé sur une nouvelle couche, en sorte qu'une partie du degradé ayant beaucoup de blanc touche la boite, tout ce qui est blanc sera appliqué, mais aussi les zones grises qui vont avoir l'effet de fondu avec un filtre que nous allons utiliser.

Voici comment nous avons fait :

Quand la couche est créee, récuperez la selection (si vous voulez pas passer par toutes les etapes precisées plus haut, maintenez CTRL et cliquez sur le calque de la couche du degradé) ... quand elle sera recuperée, vous verrez que seulement une zone est selectionée

Pourquoi ?

Car la sélection, prends seulement, tout ce qui va du blanc vers le gris de 50%, et depassé la zone selectionnée, le gris est en dessous de 50% , mais ca ne beux absolument pas dire que l'effet ne sera pas appliqué.

Alors maintenant que cette zone est selectionée, nous allons appliquer 1 ou 2 filtres et faire un réglage de couleurs sur cette petite boite.

Donc ici nous avons simplement ajouté un filtre de :

- Contours accentué
- Embalage plastique
- Flou directionnel

Et réglage de Teintes bien entendu !
Et voila notre boite qui arrive en feu.

L'utilisation des couches donne des possibilités infinies, à vous de jouer maintenant

(Merci à DxS pour la rédaction de cette documentation)

[Documentation] Les bases de l'utilisation de la plume sous Photoshop

TitaX — Tue, 06 May 2008 08:45:00 +0200

L'outil plume sous Photoshop est certainement l'outil le plus important pour tout webdesigner qui se respect.
Il permet de réaliser des formes personnalisées très utilisées dans la réalisation de template de site web.
Mais cet outil n'est pas facile à prendre en main, cette documentation vise essentiellement les débutants qui veulent se parfaire dans la maitrise de la plume pour augmenter la valeur de leur création.

Nous allons donc voir pas à pas les bases de l'utilisation de la plume.

La première chose à faire est de remplir votre calque de la couleur désirée pour le fond.
Puis de recréer un autre calque par dessus le précédent.
Activer la plume, vérifier bien d'avoir les mêmes paramêtres comme montré sur l'image ci-dessous.

Vous activez votre Calque 2 en cliquant dessus, puis faites un point avec la plume, puis un second et avec celui-ci vous pouvez bouger votre souris afin de lui donner la courbe voulue, vous pouvez mettre autant de courbe à la plume que vous souhaitez.

Une fois la courbe réalisée avec la plume, il vous faudra activez votre pinceau, couleur d'avant plan désirée.
Dans cet exercice nous avons choisi le blanc.
Vérifiez bien la barre des paramêtres du pinceau dans le haut.
Pour la forme nous avons choisi 4 étant donné que nous ne voulions pas trop mince, Opacité 100% et Flux 100%. Une fois les paramêtres bien réglés nous sommes prêt à rendre notre courbe visible, on se dirige dans l'onglet Tracés, puis en bas de cette palette vous allez cliquer sur le deuxième rond à partir de la gauche qui nous donnera Contour du tracé avec la forme.

Voilà notre courbe est visible mais on voit toujours les traits de la plume.
Donc prenez le et faite le glisser jusqu'à la poubelle dans le bas à droite de l'onglet Tracés.

Une fois ce trait retiré, on ne voit plus que la courbe que nous avions réaliser.

Petite astuce: Quelques fois on peut remarquer sur certaines créations une ligne ou courbe pixellisée et qui rend le travail moins esthétique et beaucoup moins soigné.
Nous avons une petite astuce pour remédier à ce petit problème.

Activez l'outil Doigt, puis dans la barre de paramêtres tout en haut ajustez la Forme a environ 9 tout dépend de la largeur de la ligne pixellisée et pour finir ajustez l'intensité à environ 6.
Voilà une fois les paramêtres bien établis nous pouvons passer à l'action ... passez le doigt sur la ligne ou courbe pixellisée, parfois un seul coup suffit et d'autre fois il faut passer 2 ou 3 fois, mais il est impératif de bien suivre la ligne ou courbe et surtout ne pas aller trop vite.

Voilà en espérant que cette astuce vous aidera à peaufiner vos créations.

(Merci à Eltasia pour la rédaction de cette documentation)

[Documentation] Utilisation des masques sous Photoshop

TitaX — Mon, 05 May 2008 07:45:00 +0200

Photoshop possède une multitude d'outils qui permettent la manipulation graphique, mais surtout il permet de les utiliser en combinaison.

L'outil masque est devenu un incontournable dans le domaine de la création graphique, nous allons apprendre à utiliser cet outil afin de povoir s'en servir en toute circonstance.

Explications générales

Avant de commencer,il faut savoir que dans Photoshop, les masques comprennent que les niveaux de gris ,c'est-a-dire Le NOIR, le BLANC et leur melanges ==> Les GRIS

Donc :

Le blanc = visible

Le noir = masqué

Les gris = L'opacité a un niveau choisi par raport à la clarté ou sombreté de votre gris

Pour rajouter un masque sur une image, c'est tres simple, il suffit de selectionner le calque de l'image, d'aller et cliquer dans BarreMenu > Calque > Ajouter un masque vectoriel > Tout faire apparaître

Maintenant vous avez le choix entre "tout faire apparaitre" et "tout masquer"
Donc logiquement, tout faire apparaitre ferai venir un masque rempli de blanc puisque le blanc caracterise la visibilité.

Vous pouvez aussi rajouter un masque en cliquant sur ce qui est entouré en rouge sur l'image...
Donc, il faut préciser que le calque masque est autant modifiable que le calque image, l'unique difference est que cela ne comprend pas les couleurs, mais si vous comptez lui rajouter des filtres, jouez avec les niveaux, ou courbes ... surtout n'hesitez pas !

Quelque chose de très important aussi est votre Pinceau, car c'est avec celui-ci que vous allez dessiner sur votre masque de fusion, alors comptez le nombre de pinceaux, les modifications que vous pouvez lui faire, les possibilités sont infinies.

Un exemple concret

Pour mieux comprendre nous allons suivre étape par étape, l'utilisation de l'outil masque, à l'aide d'un exemple:
Nous avons sous la main la photo d'une jeune femme.

Même si cette photo est très belle, nous voudrions la rendre plus sombre et ne faire briller que les zones où la lumière est la plus abondante :

Voici donc les quelques étapes à respecter :

Commencez par ouvrir cette image que vous pouvez télécharger ici.
Dans les calques, double-cliquez dessus, pour que "l'arriere plan" devienne un calque lui même.
Dubliquez celui-ci, et masquez le avec l'oeil, pour qu'il ne dérange pas pendant la modification de celui du bas.

Soyez sûr d'être sur le calque du bas, qui est visible, puis allez dans BarreMenu > Image > Réglages > Courbes

Et baissez le point de fin (droite) en essayant d'avoir une courbe plus ronde en rajoutant un point au milieu.

Donc votre image du premier calque devrait être plus sombre maintenant.

Cochez l'oeil du calque que vous avez caché (maintenant vous voyez l'image originale), sélectionnez le et rajoutez lui un masque, mais qui masque absolument tout, puisque maintenant nous devons faire apparaître les zones claires que nous avions entouré en rouge.

Et puis même si vous faites tout masquer, vous n'aurez qu'à sélectionner le calque de masque, et faire BarreMenu > Image > Negatif, ce qui la rendrais noire.
Donc maintenant que le masque de fusion est noir, vous pouvez voir l'image de dessous modifiéz avec les courbes.

Sélectionnez le masque noir de l'image cachée, prennez l'outil pinceau puis baissez l'opacité de celui-ci à 15 ou ce qui vous convient, et mettez la dureté du pinceau à 0%, et couleur blanche pour afficher les zones sur lesquelles nous allons dessiner.

Desssinez sur les zones ayant beaucoup de luminosité, pour arriver à un resultat qui vous plaît.

N'hesitez pas à changer la taille du pinceau, baisser l'opacité, jouer avec les niveaux du calque Masque pour arriver à un resultat satisfaisant.

Voici notre résultat :

Et voici notre calque de masque :

Alors, une deuxième chose que vous pourriez faire, est un degradé de noir et blanc dans le calque masque.
Qu'est ce que ca ferait cela ? Et bien un joli effet de fondu. Ne faites pas ces degradés directement sur le calque du masque, car ça effacerait tous vos masques faites avec le pinceau.
Il faut donc prendre l'outil de selection, ou l'outil lasso et sélectionner les zones auquelles vous voulez appliquer un effet de fondu.
Une fois sélectionné prenez l'outil de degradé linéaire et tracez une ligne de gauche à droite, ou droite à gauche.

Nous avons mis l'image créee sur l'image du masque et nous nous retrouvons avec un superbe effet "halloween"

Donc, ce sont des idées parmis tant d'autres ... n'oubliez pas que vous pouvez modifier le calque du masque comme vous voulez !
Laissez place à votre imagination.

(Merci à DxS pour la rédaction de cette documentation)

[Documentation] Créer un effet de lueur sous Photoshop et animé avec Flash

TitaX — Sun, 04 May 2008 11:00:00 +0200

Les sites web animés sont maintenant monnaie courante sur la toile, avec la démocratisation de l'ADSL et le haut débit qui va avec, nous avons la possibilité de donner à nos visiteurs des sites avec des animations très perfectionnées et un superbe rendu.

Nous allons apprendre à réaliser un effet de lueur en utilisant à la suite le logiciel Photoshop et le logiciel Flash MX pour créer l'animation.
La réalisation de cet effet est assez simple et ne demande qu'un masque et un dégradé de couleur linéaire (radial de préférence), cette documentation est donc accessible au débutant.

Partie Photoshop

1 - Créez un document de 800x600 et tracez un dégradé linéaire vertical, partant du clair au foncé sur votre premier calque.

2 - Ensuite créez un nouveau calque, et retracez un dégradé linéaire vertical, mais cette fois le gris clair doit être un peu plus clair, et le foncé un peu plus foncé ...

3 - En étant sur ce nouveau calque, sélectionnez le rectangle de sélection et commencez à découper ce dégradé en petit morceaux, comme sur l'image ci-dessous.

Si j'ai mis des flèches, c'est pour vous montrer que les bords sont + découpés que le centre, en avançant dans le tutoriel vous allez comprendre pourquoi.

4 - Maintenant que c'est fait, tout ce que vous devez faire, c'est sélectionner ce calque, puis aller dans BarreMenu > Edition > Tranformation > Inclinaison , sélectionnez les coins supérieurs gauches et droits, et descendez les pour que cela crée une profondeur, et puis rentrez les coins dans le milieu, comme sur l'image ci-dessous :

5 - Maintenant, rappelez vous que je vous avais dis de + découper les bords que le centre, en fait on va effacer quelques petits rectangles ... le moyen le + rapide de le faire est de sélectionner la baguette magique (sur tolérance : 32) et effacer les petits carreaux pour former une espèce de pyramide, ensuite rajoutez une simple ombre portée, de distance 0 et taille 20.

6 - Maintenant l'opération que vous devez faire peut être un peu difficile ,mais il suffit juste de suivre les étapes :

A - En étant sur le calque des petits carreaux inclinés, maintenez la touche CTRL et cliquez sue votre calque dans la palette calques, remarquez qu'en survolant calque et en ayant la touche CTRL enfoncée, la petite main a un rectangle de sélection sur elle.

B - Maintenant, sans desélectionner, aller sur l'outil de rectangle de sélection, puis faites un deuxième click sur votre sélection et cliquez sur Intervenir, ceci va inverser votre sélection .

Pourquoi j'ai fait ça ? En inversant la sélection, les zones vides pourront être remplies,et elles nous serviront de masque dans flash.

7 - Maintenant, sans désélectionnez, créez un nouveau calque, puis remplissez ce calque de noir, étant donné que la sélection sera encore la, ça remplira l'intérieur et la partie haute de votre image.

8 - Donc, nous, tout ce qu'on a besoin c'est l'intérieur des petit carreaux, alors on va effacer tout ce qui ne sers à rien, vous pouvez le faire avez l'outil Lasso Polygonal.

Il suffit d'effacer les zones que j'ai tracées :

Voila en masquant les autres calques, vous voyez ce que ça donne:

Vous pouvez toujours rajouter un nouveau calque et retracer un dégradé allant du noir au blanc pour créer l'effet du haut, qui disons sert de "fond".

9 - La on va pouvoir enfin passer à Flash, mais avant de faire ça, on va réduire la taille de la zone de travail et exporter nos images.

-> Donc l'image est en 800 x 600 ...ce qui est trop, on va aller dans BarreMenu > Image > Taille de la zone de travail, et faire en sorte que ca ressemble a ça :

J'ai passé en 800x250 et cliqué sur la flèche de bas, comme ça mes calques s'alignent sur le bas

10 - Maintenant on va exporter nos calques !

A - D'abord vous masquez le calque qui se trouve tout en haut, c'est-a-dire le calque qui nous servira de masque dans Flash, et vous savez en JPG ...nommez le "fond".

B - Ensuite vous faites l'inverse, donc vous masquez les calques de fond, et vous affichez seulement le calque qui nous servira de masque dans Flash.

C - Sauvez celui-ci en PNG,et nommez le "masque".

Partie Flash

1 - Voila, maintenant dans Flash ça va aller assez vite, d'abord on va régler les dimensions de l'image sur 800x250 et mettre en 24 images/seconde (à moins que vous voudriez autre chose) Vous importez vos 2 images sur 2 calques différents, faites en sorte que le fond sois en dessous du calque qui servira de masque ....

Maintenant, ce qu'on a importé à partir de Photoshop doit être le masque, l'image est un PNG transparent, mais flash ne prends pas en compte cela, donc si vous créez un masque avec cette image, les zones transparentes il les comptera comme opaques car flash est un programme vectoriel, ce qu'on va devoir faire, c'est transformer cette image en forme vectorielle, pour faire cela, on va devoir tracer ce bitmap.

2 - En étant sur le calque qui nous servira de masque, allez dans BarreMenu > Modification > Tracer le bitmap ,et ajustez les options comme je l'ai fait :

Remarque : Si vous distinguez des zones grises apparaitre dans le centre, effacez les manuellement.

3 - Maintenant, sélectionnez ce calque et tapez F8 pour le transformer en symbole, une fenêtre apparaitra,choisissez le comportement CLIP.

4 - Double cliquez sur ce symbole, ça va entrer à l'intérieur de celui-ci, ensuite créez un nouveau calque et passez le en dessous du calque de la forme qu'on à vectorisé.

Remarque : Il est préférable de verrouiller ou masquer le calque de la forme vectorisée pour qu'elle ne nous gènes pas.

5 - Sélectionnez le calque vide qui se trouve en dessous,et créez une ovale (rond) assez grande en longueur pour qu'il dépasse la taille du masque (effacez le contour de l'ovale).

Sélectionnez votre ovale et allez dans BarreMenu > Fenetre > Melangeur de couleurs > Texte italique, mettez le type de remplissage sur radial, et rajoutez une couleur dans la barre de dégradés.

Faites en sorte que les réglages soient comme sur l'image Image:

Le but est de rendre le dégradé transparent sur les bords ce qui va créer un effet de lumière pendant son mouvement.

6 - Maintenant on va créer une simple interpolation de forme pour créer l'effet, sur la première image clé, soyez sur que votre ovale est en dehors de la zone de travail à gauche, avancez à 80 images sur la ligne de temps, et cliquez sur F6 pour insérer une image clé, déplacez votre ovale en dehors de la zone de travail, mais à droite.

Cliquez sur la première image de votre ligne de temps, et dans les propriétés, réglez l'interpolation sur forme.

7 - Maintenant, la dernière étape qui est assez simple, déverrouillez ou démasquez votre calque du "masque",faites un deuxième click sur le calque à partir de la ligne du temps,et choisissez masque, ceci va transformer votre forme en masque et l'ovale radial en masqué.

Résultat

Voila, fin du tutoriel .... voilà ce que j'ai obtenu et c'est horrible...

texte pour ta video

Enfin c'est pas assez travaillé, alors prenez votre temps, bonne chance.

(Merci à DxS pour la rédaction de cette documentation)

[Documentation] Créer un effet abstrait sous Photoshop

TitaX — Sat, 03 May 2008 10:00:00 +0200

Cette documentation est consacrée à l'apprentissage d'une technique spécifique pour obtenir un rendu abstrait à partir de filtres et d'une image de fond qui servira de texture de base.
L'effet abstrait obtenu sous Photoshop pourra servir pour la création de logo, d'avatar ou encore de fond pour un site web ou d'autres créations graphiques.
Cette documentation est accessible même au débutant, elle permettra d'arriver à des créations très variées facilement en suivant les étapes pas à pas.

A la fin de cette documentation vous serrez capable de réaliser des textures comme celles-ci :

1- Vous devez trouver une image de fond qui sera utilisée comme texture. Nous nous intéresserons ici au béton. Une fois l'image trouvée, en faire un nouveau document sous Photoshop, puis la recadrer de taille 100x100.

2- Vous devrez la faire pivoter pour que les traits soient à la diagonale. Pour se faire, édition - transformation manuelle.

3- Ensuite, vous devrez lui donner un aspect un peu plus lisse, pour ajouter ultérieurement des points de lumière.
Pour se faire vous dupliquerez le calque. Vous ferez, sur le nouveau, filtres - artistiques - pinceau à sec. Ensuite, vous incrusterez ce calque dans l'autre. Vous pouvez aplatir.

4- Vous devrez règler les courbes afin de donner nos fameux points de lumières.

Nous devrions avoir cela :

5- Nous passons maintenant à l'étape où il faut ajouter la couleur. Cette étape ne contiendra pas de capture et pourra être répétée autant que désiré. Il s'agit de l'étape où la création sera personnalisée, c'est celle qui lui donnera toute son originalité.

Vous devez prendre une sélection rectangulaire, et sur un nouveau calque, la remplir de la couleur voulue. Il faut lui appliquer une transformation manuelle puis l'incruster. Notez bien que si plusieurs bandes se touchent, le rendu ne sera que meilleur. Vous pouvez également, vers la fin, utiliser le lasso polygonal, cela ajoutera une touche d'originalité supplémentaire.
Attention cependant à ne pas utiliser trop de couleurs différentes ; jouez dans les dégradés. /!\ Aplatissez, surtout /!\

6- Une fois la couleur ajoutée, vous devrez foncer votre création, elle est certainement à vous arracher la vue, actuellement. Pour se faire, image > règlages > courbes.

Nous devrions avoir cela :

7- A présent, la finition de votre oeuvre d'art entre en jeu. Ce sera encore une fois libre, mais je vais quand même vous montrer ma façon de faire. Je dois préciser qu'un motif devra cependant avoir été créé à l'avance. Vous devez sélectionner la moité inférieure de l'image. Règlez une fois de plus ses courbes pour qu'elle soit un peu plus foncée que la moitiée supérieure.

8- Dans un nouveau calque, appliquez le motif screen TV diagonal, puis incrustez-le. Ensuite, faite une sélection avec le lasso polygonale la plus abstraite possible, mais qui ne couvre pas totalement la "séparation" ainsi créée. Vous devrez la remplir du même motif, dans le même calque. Aplatissez.

9- Dans un nouveau calque, barbouillez un peu en blanc sur la ligne avec le crayon. Faite de même avec du noir, dans un calque séparé. Incrustez-les tous deux et... c'est terminé !

A vous de jouer maintenant

[Documentation] Créer un smiley sous Photoshop

TitaX — Fri, 02 May 2008 07:45:00 +0200

Nous allons apprendre à réaliser nos propres smiley grâce au logiciel Photoshop.
Les smiley sont très utilisés sur internet afin de d'afficher une émotion ou une humeur.
Ils sont le partenaire idéal d'un forum et même d'un site web, nous allons apréhender pas à pas la création de smiley personnalisés.

Etape 1 : la prise en main

Nous allons prendre en main notre logiciel : Fichier > Nouveau (document de 21x21px) Zoomez en 800% en faisant CTRL + ou comme sur l'image si dessous Affichage + Agrandir.

Quand 100% sera devenu 800%, vous pourrez passer à l'étape 2

Etape 2: la prise en main ( suite )

Nous allons supprimer le fond en utilisant l’outil gomme : (raccourci : e), ATTENTION ! Votre smiley sera adapté a tout type de forum, mais sera plus sale : pour qu'il ne le soit pas et bien il suffit de remplir le fond avec la couleur qui convient, par exemple pour TitaXium c'est #DCE0E4. C'est la couleur de la zone ou sera posté le smiley

puis vous allez créer une sélection parfaitement ronde

Pour faire une sélection parfaitement ronde maintenez MAJ. Tout en gardant la sélection faîtes : Calque > Nouveau > Calque : Nommez le Fond Smiley. Remplissez la sélection avec du jaune (exemple : #E4C741).

Etape 3: Options de Fusion

Nous allons maintenant passer aux Options de fusion. Mais avant cela nous allons choisir les couleurs de premier plan et d’arrière plan. Suivez le schéma suivant :

Une fois cela fait nous allons faire un clique droit sur le calque : fond smiley : Options de fusion : cliquez sur Incrustation En Dégradé. Cliquez sur : Sélecteur de Dégradé comme indiqué sur l’image ci-dessous :

Cliquez sur le premier dégradé en haut à gauche, et vous allez régler vos options de Fusions comme ci-dessous :

Maintenant votre smiley en prend vraiment la forme.

Etape 4: Options de Fusion 2

Maintenant cliquez sur contour.

Nous allons modifier les propriétés :

Taille : 1px Couleur : (cliquez sur la couleur pour la modifier) #98874A

Normalement vous devriez avoir ca :

Etape 5: Les yeux et la bouche

Voila la dernière étape de notre tutorial, la bouche et les yeux :

Nous allons utiliser l'outil éclipse pour faire nos yeux :

Maintenant nous allons dessiner nos yeux, je vais juste donner quelques exemples parce que y’a des tas de façons de le faire.

Donc je dessine mon premier cercle, puis mon deuxième. Suffisamment gros pour qu’on puisse le voir en 100%. Pour la bouche vous pouvez utiliser le pinceau, mais je crois en votre originalité, voici quelques exemples de ce que cela peut donner une fois terminé et enregistré en .gif :

Quelques Derniers conseils : variez les tailles, et les contours, et même les dégradés.

[Documentation] Créer un effet de texte Matrix sous Photoshop

TitaX — Thu, 01 May 2008 11:00:00 +0200

Nous allons apprendre à créer un effet Matrix très utile pour agrémenter des wallpapers ou encore des bannières et headers.

Voici ce à quoi nous voulons arriver :

Commençons donc par créer un nouveau document de taille 500px en largeur et 250px en hauteur auquel nous allons appliquer un fond de couleur noir :

Ajoutons maintenant notre texte et appliquons lui la police, la taille souhaitée et la couleur (ici nous prendrons #B4FFAA) :

Nous allons créer une copie de ce calque et lui appliquer un couleur différente ( ici nous prendrons #00FF18), placons ce calque sous le premier calque et appliquons lui maintenant un flou directionnel (filtre->atténuation->flou directionnel).

Créons une copie de ce dernier calque pour lui appliquer une transformation manuelle (edition->transformation manuelle).

Appliquons pour finir des taux d'opacité de 75% pour le premier calque copié et de 30% pour le second.

Bien entendu vous pouvez appliquer des effet plus ou moins différent pour obtenir des résultats qui peuvent différer.

Vous pouvez cliquez ici pour télécharger le fichier source de ce tutorial.

[Documentation] Utilisation du filtre Dispersion sous Photoshop

ikya — Wed, 30 Apr 2008 10:00:00 +0200

Nous allons aujourd'hui apprendre à utiliser le filtre Dispersion sous Photoshop. C'est un filtre permettant de faire beaucoup de transformations réalistes, qui est peu connu.

Il fait une transformation directe sur l'image choisie par rapport aux formes d'une autre image.

Prenons en exemple cette forme créée sous Photoshop :

Cette image est celle qui sera transformée.

Par quoi ? Cette image par exemple :

Maintenant je vais vous expliquer le choix de mes images.

La première image, j'ai créé une forme très simple avec un dégradé, comme ça, quand la transformation sera faite, vous pourrez voir comment elle est affectée à l'image.

La deuxième image, mérite plus d'explications que la première :

La façon dont la transformation est faite sur une image, correspond à la luminosité et à l'obscurité de l'image qui se voit appliquer la transformation.

Plus la zone est claire, plus l'image à laquelle ont applique l'effet aura la partie tirée en avant, plus la zone sera froncée, plus l'image sera envoyée en arrière.

Donc la deuxième image a :

Un fond gris de 50 %. Pourquoi ce gris ? Car un gris de 50 % est le juste milieu en la luminosité et l'obscurité. C'est à dire qu'il appliquera AUCUN effet sur l'image qui prends le filtre.

Donc logiquement, les zones blanches, vont tirer les parties de l'image en avant, et les zones noires vont les envoyer en arrière. Remarquez que les lignes blanches et noires tirées sont très lisses, et n'ont aucune dureté, logique, c'est pour que la transformation se fasse d'une façon lisse et naturelle. Si vous voulez faire la dispersion pour des effets plus marqués, montez le pourcentage de dureté de votre pinceau.

Donc quand vous avez sélectionné le calque de votre dégradé coloré ( qui est bien sur un fond transparent ), vous allez dans Menu > Filtres > Déformation > Dispersion

Vous aurez cette fenêtre qui va apparaître :

Ici vous indiquez l'échelle horizontale et verticale, plus la valeur sera élevée, plus la dispersion sera forte. Vous laissez les valeurs sur 10, c'est assez fort pour que vous distinguiez l'effet produit. En cliquant sur OK, un message va vous demander de choisir le PSD qui servira à appliquer l'effet, donc c'est le PSD de l'image 2 avec le gris 50 % et les lignes noires et blanches ( vous devrez créer un autre PSD ).

Faites OK.

Ci-tôt fait vous verrez que le dégradé coloré va prendre la forme de l'image, donc les zones blanches ( claires ) en avant, les noires ( sombres ) en arrière.

Prenez le calque où les formes ont été appliquées, mettez le par dessus votre dégradé coloré, passez maintenant l'opacité dans les environs de 70 % et vous distinguerez bien l'effet prévu.

Donc le calque de gris, je ne l'ai pas mis là pour rien, il va nous servir, il va créer l'illusion de lumières et d'ombres sur mon dégradé coloré. Vous allez sélectionner ce calque, et cliquer sur CTRL + G. Cela va intégrer ce calque a l'intérieur de votre dégradé coloré, donc tout ce qui est a l'extérieur du dégradé coloré ne se verra pas, disons qu'il sert comme masque au gris, ensuite passez le calque du gris en mode Incrustation.

Vous devriez obtenir à la fin, un résultat comme ça :

Il y a bien entendu d'énormes possibilités à explorer.

[Documentation] Créer un quadrillage sous Photoshop

ikya — Tue, 29 Apr 2008 10:00:00 +0200

Nous allons apprendre comment mettre un fond quadrillé à vos créations.

L'effet recherché est celui-ci :

Créez un nouveau document ( Ctrl+N ) de 10 pixels sur 10. Choisissez un fond transparent ou votre couleur de fond ( fond noir pour l'exemple ).

Prennez l'outil crayon avec une mine d'un pixel et dessinez les bords droits et bas ( en zoomant ) avec la couleur de votre choix.

Laissez en revanche le pixel qui fait l'angle entre les côtés droit et bas pour un petit effet d'optique sinon coloriez là aussi.

Si vous avez choisi de créer un petit effet d'optique changez la couleur que vous aviez utilisé en une couleur de la même teinte mais plus claire ( il faut que la différence soit visible sans être flagrante ). Une fois votre couleur choisie coloriez le pixel en bas à droite.

Enregistrez votre motif en .gif vu qu'il n'y a que 2 à 3 couleurs et ouvrez le document .gif. Faites édition > Utiliser comme motif et vous avez votre motif.

[Kits Graphiques] Survivall Technologie - Par Torlik et Samy

Nonos — Mon, 28 Apr 2008 08:00:00 +0200

Survivall Technologie

Description : Kit dans les tons bleus, aux finitions très propres.

Auteur: Torlik (Design) & Samy (Mise en page)

Commentaires: Kit extensible. Un PSD du header est également fourni dans l'archive.

Apercu: Cliquez ici

Archive (.rar): Cliquez ici

[Documentation] Créer un motif diagonal sous Photoshop

ikya — Sun, 27 Apr 2008 10:00:00 +0200

Nous allons aujourd'hui apprendre à créer un motif diagonal, soit pour le mettre en fond d'un design ou alors pour s'en servir en vue d'une quelconque création.

Le but de cette manoeuvre est d'arriver à créer un motif afin de rendre vos créations plus personnalisées.

Nous allons tout d'abord créer un nouveau document de 5x5 pixels : Fichier > Nouveau ( CTRL + N ) > Largeur : 5 pixels - Hauteur: 5 pixels - Arrière Plan : Transparent

Il faut maintenant créer votre motif. Zoomez au maximum en appuyant sur CTRL et + à plusieurs reprises.

Sélectionner maintenant un carré ( M ) comme sur l'image ci dessous puis remplissez - le de noir: Edition > Remplir. La couleur de remplissage déterminera la couleur de vos lignes diagonales.

Répétez ensuite la manoeuvre afin d'obtenir ceci :

Ou cela pour des lignes dans le sens opposé :

Il faut maintenant enregistrer votre motif pour pouvoir l'utiliser par la suite sur l'une de vos créations. Edition > Utiliser comme motif. Donnez ensuite un nom à votre motif puis cliquez sur OK.

L'intérêt de créer un motif est évidemment de l'utiliser par la suite. Voici comment utiliser l'un de vos motifs sur une image.

Tout d'abord, ouvrez votre image ou un nouveau document sur lequel vous voulez ajouter votre motif. Ajouter un nouveau calque ( Calque > Nouveau ou Maj+CTRL+N )

Remplissez ensuite ce calque avec votre motif de la façon suivante : Édition > Remplir > Avec : Motif et choisissez parmi l'un de vos motifs.

[Kits Graphiques] Grand Theft Auto - Par Torlik et Nonos

Nonos — Sat, 26 Apr 2008 08:00:00 +0200

Grand Theft Auto

Description : Kit est brun et rose, au couleur de GTA., thème GTA

Auteur: Torlik (Design) & Nonos (Mise en page)

Commentaires: Kit extensible. Un PSD du header est également fourni dans l'archive.

Apercu: Cliquez ici

Archive (.rar): Cliquez ici

[Documentation] Créer un dégradé sous Photoshop

ikya — Fri, 25 Apr 2008 16:15:00 +0200

Nous allons apprendre à créer un motif en dégradé ( très utile pour les avatars et signatures qui se veulent très personnifiés ).

Voici l'image initiale :

Pour commencer ouvrez votre image ( Ctrl + O et choississez votre image ).

Pour cet exemple j'ai pris une image commune assez courante sur MSN Messenger.

Créez un nouveau calque (Ctrl+Maj+N)

Cliquez sur le calque que vous venez de créer afin de le sélectionner et faite Edition > Remplir, puis sélectionnez votre motif et cliquez sur OK.

Important : si vous n'avez pas de motif, reportez - vous à la fin du tuto.

Ajoutez à votre calque ( celui avec le motif ) un masque vectoriel en cliquant sur le bouton rectangulaire avec un cercle au centre dans l'onglet des calques.

Cliquez sur le masque et appliquez dessus un dégradé noir et blanc. Pour avoir ces couleurs réinitialisez les palettes en appuyant sur D quand votre souris est hors de la zone de travail.

Voici le résultat :

Important : Si vous n'avez pas de motif il est très simple d'en créer un. Créez une image de 5x5 pixels avec un fond transparent. Prenez l'outils crayon avec une mine de 1 pixel et une couleur noire et tracez les bords droit et gauche de l'image. Vous avez votre motif. Faites Edition > Utiliser comme motif ... et vous pouvez l'enregistrer ( en cas de réinstallation de Photoshop les motifs seront perdus donc autant les avoir sur son PC ).

Hardy Heron disponible !

ikya — Thu, 24 Apr 2008 21:22:00 +0200

Et oui, comme prévu, Ubuntu 8.04 LTS nom de code Hardy Heron est dans les bacs !

Nous allons donc voir les nouveautés qu'amène cette nouvelle version d'Ubuntu.

Pourquoi 8.04 ? Le 8 signifie 2008 et le 04 signifie avril, tout simplement.

Que veut dire LTS ? LTS signifie Long Term Support, et cela veut dire que cette version de Ubuntu sera supportée et mise à jour pendant 3 ans encore.

Et pourquoi Hardy Heron ? Parce que Ubuntu 8.04 est la 8ème version de Ubuntu et que le H est la 8ème lettre de l'alphabet. Or, il est dans la tradition d'Ubuntu d'appeler ses versions par un animal et un adjectif, ici héron robuste.

Voyons maintenant les nouveautés :

GNOME 2.22 : la nouvelle version de l'interface graphique GNOME
Linux kernel 2.6.24 : le kernel 2.6.24 de Linux
Xorg 7.3 : la version 7.3 de Xorg
Mozilla Firefox 3 : la dernière version du navigateur Firefox, actuellement en beta 5
Brasero : un logiciel de gravure qui vient remplacer Serpentine
Transmission : un logiciel de P2P BitTorrent qui remplace GNOME BitTorrent Downloader
Wubi : permet à un utilisateur sous Windows d'installer Ubuntu comme n'importe quelle application
et beaucoup d'autres choses

Voici quelques liens utiles :

Un univers Netvibes TitaXium

TitaX — Thu, 24 Apr 2008 19:31:00 +0200

Le meilleur moyen connu de suivre l'activité d'un site web est d'utiliser un aggrégateur de flux RSS et de s'y abonner

Ce sytème permet de suivre au jour le jour les différentes nouvelles et annonces de nos sites préférés.
Evidement TitaXium n'échappe pas à cette règle et de nombreux flux RSS sont disponibles afin de vous permettre de vous abonner pour suivre toutes notre actualité.

Parmis les aggrégateurs pratique et simple d'accès nous trouvons Netvibes qui permet de créer une page d'accueil personnalisée et d'y ajouter des abonnements RSS rapidement afin d'en faciliter l'accès.

Pour cela afin de faciliter l'accès à l'actualité de TitaXium, nous avons créer l'Univers Netvibes spécial TitaXium, où vous pourrez y retrouver toute notre actualité, nos derniers articles, les derniers articles de nos portfolios ainsi que leur commentaire, et pleins d'autres surprises...

Connectez-vous vite sur l'Univers TitaXium afin de suivre simplement l'évolution de notre communauté.

Et vous vous utilisez quoi pour lire vos flux RSS ?

A+

TitaX

[Kits Graphiques] Phoenix Ampet - Par Torlik et Samy

Nonos — Thu, 24 Apr 2008 08:00:00 +0200

Phoenix Ampet

Description : Kit de couleur rouge et bruns-gris, thème futuriste

Auteur: Torlik (Design) & Samy (Mise en page)

Commentaires: Kit extensible. Un PSD du header est également fourni dans l'archive.

Apercu: Cliquez ici

Archive (.rar): Cliquez ici

[Kits Graphiques] Sans Nom - Par Lecorsiau

Nonos — Tue, 22 Apr 2008 08:00:00 +0200

Sans Nom

Description : Design à la fois simple et d'apparence professionel, il pourra vous servir pour tout type de site.

Auteur: Lecorsiau (Design)

Commentaires: Kit extensible. Un PSD du header est également fourni dans l'archive.

Apercu: Cliquez ici

Archive (.rar): Cliquez ici