TitaXium - graphisme

Sélection du mois de juin 2008

Nassim AB — Sun, 15 Jun 2008 01:56:00 +0200

En juin, fais quelque chose de bien !
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 site de Toucouleur : http://www.toucouleur.fr/

Blog de Jeff Sarmiento : http://www.jeffsarmiento.com/

Festival Caxton Street Seafood : http://www.caxtonstreetfestival.com.au/

Pizzeria Venetia http://www.pizza-venetia.ro/

Portfolio d'aespec : http://www.aespec.co.uk/

Sondage : Quel logiciel graphique utilisez-vous ?

TitaX — Fri, 30 May 2008 07:30:00 +0200

Nous passons parfois des heures, des dizaines d'heures sur ces logiciels à peaufiner nos créations pour en faire de véritables oeuvres d'arts.
Mais qui sont exactement ces logiciels sur lequels nous nous piquons les yeux, quels logiciels utilisez-vous le plus pour créer vos interfaces ? retoucher vos photographies ?

TitaXium met en place un grand sondage pour connaitre votre logiciel graphique préféré !!!
N'hésitez pas ! cliquez sur notre sondage pour donner votre avis !

Si vous voulez aussi donner votre opinion sur les différents logiciels graphiques que vous avez testez, vous pouvez publier votre commentaire en cliquant ici

Bon vote à tous

Réalisation du mois de Mai 2008

wil24 — Sun, 25 May 2008 11:56:00 +0200

Titaxium vous invite...

à visiter nos réalisations en cours mais aussi celles déjà terminées sur notre forum.

Actuellement, je réalise une commande pour une communauté sur la musique dans la province du Luxembourg en Belgique. Ce site servira à référencer un maximum de groupes rock, punk, métal,... de cette province. Cette communauté présentera également un forum (animé par des modérateurs), des news (par l'équipe de newsers), un calendrier des concerts, festivals et autres évènements de la province, une galerie photo présentant les photos des festivités de la province.
Une zone membre sera également mise en place pour que vous puissiez proposer vos photos, vos groupes, vos évènements, vos news, participer au forum,... .

Cliquez pour voir le template

[Documentation] Créer un bouton Glossy sous Photoshop

TitaX — Sat, 17 May 2008 02:00:00 +0200

Nos créations sont souvent sublimées par un petit rien, une petite touche, un joli effet.
L'utilisation d'un effet brillant (souvent nommé glossy) sur un bouton donne cette petite touche qui fait que votre interface sera belle et remarquable !
Je l'utilise souvent sur TitaXium pour les boutons ou pour les menus, cet effet est devenu très à la mode avec les designs web2.0.

Nous allons voir comment réaliser en quelques minutes cet effet glossy, cette documentation s'adresse à toutes les personnes désireuses de réaliser de belles interfaces web par exemple, du débutant à l'expert.

Création du fond du bouton

Commençons donc par créer une nouvelle image (CTRL+N) de la taille que vous désirez et remplissez-le avec la couleur blanche.

Nous allons créer un rectangle aux bords arrondis grâce à l'outil "Rectangle Arrondi" avec un rayon de 5px de la couleur que vous souhaitez.

Agrémentons le fond de notre bouton avec une petite ombre portée avec les options ci-dessous (vous pouvez adapter en fonction de vos besoins/gouts) :

Création de l'effet glossy

Nous allons créer un nouveau calque et le nommer glossy puis sélectionner un rectangle autour de notre fond comme ci-dessous :

Puis le remplir avec un dégradé un peu plus clair que votre couleur de fond afin de réaliser l'effet de brillance.

Reprenons ensuite la sélection de notre fond en cliquant dans votre liste de calques sur votre forme en appuyant simultanément sur CTRL.

Une fois notre sélection récupérée, il faudra la contracter de 2 px (sélection > modifier > contracter) puis l'intervertir (Maj+CTRL+I).
Ensuite nous allons supprimer sur le calque "glossy" tout se qui appartient à cette sélection :

Continuons maintenant en modifiant un peu la forme de notre effet brillant pour le rendre plus rond sur le bas.
Nous allons donc transformer le calque "glossy" (CTRL+T) puis le déformer (édition > transformation > déformation) pour le rendre rond sur le bas.
N'hésitez pas à zoomer pour être encore plus précis.

Enfin pour peaufiner notre bouton nous allons ajouter un petit trait blanc sur le contour haut du fond du bouton pour donner une certaine profondeur.
Nous ajoutons donc un contour dans options de fusion du calque "glossy" avec les options ci-dessous ( à adapter en fonction de vos besoins bien sûr)

Et voilà notre bouton est terminé, il nous vous reste plus qu'à ajouter votre texte.

Vous pouvez télécharger le fichier source de notre exemple au format .PSD

Bien sûr vous l'aurez remarqué il y a plusieurs façons de réaliser cet effet et chaque option est modifiable afin de coller au mieux à l'effet final désiré.
Bon courage à tous

TitaX

[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)