J’ai découvert ce graphiste/webdesigner espagnol sur deviantart et je dois dire que j’ai tout de suite accroché son style, C’est tout simplement magnifique!!!!

Voilà un petit aperçu de ses créations:

N’hésitez pas à faire un tour sur ses sites et/ou son deviantart.
-Site web: minimalminds.com
-Site web: iconiclab.com
-Deviantart: minimalminds

Bonne balade

Voici un site qui est composé de plusieurs créations de divers artistes et toutes réalisées avec Photoshop.
N’hésitez pas à y faire un petit tour pour le plaisir des yeux

Voilà déjà un petit aperçu de ce qui vous attends…

Réalisé par: Bart Van Leeuwen

Réalisé par: Pierre Beteille

Réalisé par: Manuel Archain

Réalisé par: Marian Rupp

Continuez la visite: artistsofphotoshop.com

Et oui encore un nouveau thème … mais cette fois çi c’est le bon!!! Je suis finalement revenu à quelque chose de plus classique/sobre car je trouve que ça passe mieux ^^, il reste encore quelques modifs par-çi par-là et puis tout sera bon.

J’espère que ce thème vous plait et si vous constatez des bugs n’hésitez par à m’en faire part

A bientôt

Comment créer une boite 3D avec Photoshop CS2.

PS: Les images du tuto ne sont pas en taille réelles!!

1/
Créez un nouveau document taille 500*500px avec fond blanc.

2/
Tracez 2 rectangles comme ci-dessous et remplissez les de la couleur de votre choix.

3/
Maintenant c’est à vous de remplir comme vous le souhaitez. Par contre n’oubliez pas de créer une ligne d’1px de largeur le long du bord gauche sur la face de la boite afin de faire la démarquation entre la face et le côté (voir flèche rouge).
Mettez les éléments de la face dans un dossier “face” et les éléments du côté dans un autre dossier “côté”, (pour créer un dossier utilisez cette icones dans la palette des calques).

4/
Maintenant passons à la partie 3D, vous aller voir c’est super simple!!! Déjà pour commencer il va falloir coller ces 2 parties ensemble. Rapprocher la partie “face” à côté de la partie “côté”, puis masquez le fond.

Ensuite masquez le côté pour ne garder que la face, allez dans Image et faites Appliquer une image… et changez juste Fusion dans Opération pour y sélectionner Normal et Ok.
Faites de même pour le côté.

5/
Sélectionnez le calque avec la partie “face” puis allez dans Edition / Transformation / Perspective et utilisez la poignée indiquée d’une flèche rouge puis allez vers le haut afin d’obtenir le même résultat que la capture ci-dessous.

Maintenant retournez dans Edition / Transformation manuel et utilisez la poignée indiqué par une flèche rouge puis allez vers l’intérieur de l’image afin d’obtenir le même résultat que sur la capture ci-dessous.
Et pour finir sélectionnez l’outil Déplacement en validant par ok la fenêtre qui s’ouvre.

6/
Faites de même pour le côté.

7/
Rejoignez correctement les 2 parties ensemble afin d’obtenir le résultat final.

Télécharger la version .jpg du tuto.

Tutorial pour réaliser un petit fantôme bien sympa et customisable à souhait avec Photoshop CS2.

1/
Ouvrez un nouveau document de taille 1000*1000 px et de couleur #616161.

2/
Sur un nouveau calque et a l�??aide de l�??outil Plume créez une forme se rapprochant le plus possible de ça.

Puis remplissez de blanc. Mainenant il va vous falloir allez dans Ajouter un style de calque et voici les réglages.

3/
Créez un nouveau calque au dessus de celui de votre fantôme, maintenant il va falloir faire les ombres dû au relief du drap. Pour cela reprennez l�??outil Plume et faites comme çi-dessous.

Une fois tout les traits terminés allez dans Filtre > Atténuation > Flou gaussien et règlez le rayon sur 8,0 pixel. Maintenant allez dans Ajouter un style de calque et faites ceci.

4/
On va rajouter une petite ombre sur le bas du drap et une autre petite ombre sur le bord extérieur du drap. Pour l�??ombre sur le bas du drap:

Commencez par vous rendre sur le calque ou se trouve votre fantôme et faites un ctrl + clic pour sélectionner la forme de celui çi. Maintenant créez un nouveau calque au dessus et prennez l�??outil Dégradé avec comme couleur:

Et faites votre dégradé en partant du bas et jusqu�??au haut de la flèche.
Jouez avec l�??opacité de ce calque si vous trouvez l�??ombre trop foncé.

Pour l�??ombre sur le bord extérieur du drap:
Même principe que pour l�??ombre du dessus retournez sur le calque de votre fantôme et refaites ctrl+clic pour sélectionner la forme de celui çi. Re créez un nouveau calque au dessus et cette fois çi remplissez de noir #000000 puis déselectionner. Avec l�??outil Déplacement descendez ce calque de 3 px.
Prennez l�??outil lasso Polygonal et faites une sélection comme çi dessous puis touche Suppr. de votre clavier et baissez l�??opacité de ce calque à 35%.

Bon concernant le corps du fantôme c�??est fini, voilà le résultat final:

5/
Bon passons au yeux.
Déjà créez un dossier nommé OEIL pour pouvoir y placer les calques que vous allez faire au fur et à mesure. Sur un nouveau calque que vous allez nommer �??Fond de l�??oeil�?? vous aller placé dans le dossier OEIL utilisez ou la plume ou l�??éllipse de sélection afin de faire une forme ovale qui sera le fond de l�??oeil et remplissez la de blanc #FFFFFF.

Allez dans Ajouter un style de calque et dans contour.

Faites un ctrl + clic sur le calque du �??Fond de l�??oeil�?? puis allez dans Sélection > Modifier > Contracter > 1px et maintenant prennez l�??outil dégradé avec comme couleurs: #DADADA à gauche et F2F2F2 à droite avec pour les deux une opacité à 100%. Faites votre dégradé de bas en haut sur toute la surface et nommez ce calque �??Dégradé�??.

Re faites un ctrl+clic sur le calque �??Fond de l�??oeil�?? puis Sélection > Modifier > Contracter > 2px et créez un nouveau calque au dessus de �??Dégradé�?? et avec l�??outil dégradé et de couleur blanche, #FFFFFF à gauche et une opacité de 100% et #FFFFFF à droite et une opacité de 0% faites comme ci dessous.

Maintenant créez un nouveau dossier nommé �??Pupille�?? reprennez l�??outil Ellipse de sélection et sur un nouveau calque faites un ovale comme sur la capture et remplissez de noir #000000 et nommé ce calque �??Fond pupille�??.

Ctrl+clic sur le calque �??Fond pupille�?? puis Sélection > Modifier > Contracter > 2px et avec l�??outil dégradé en blanc comme les réglages du dessus, créez un nouveau calque au dessus de �??Fond pupille�?? et faites comme sur la capture ci dessous et nommé le �??Dégradé1�??. Ne déselectionner pas et passez à la prochaine étape.

Déplacez votre sélection comme sur la capture et touche Suppr. de votre clavier.

Faites pareil pour créer le reflet du bas de la pupille afin d�??obtenir le même résultat que la capture du dessous, bien entendu sur un nouveau calque et nommez le �??Dégradé2�??.

Maintenant passons à la dernière étape pour finir l�??oeil. Faites un ctrl+clic sur le calque �??Fond de l�??oeil�?? puis créez un nouveau calque sous le calque �??Fond de l�??oeil�?? et allez dans Sélection > Modifier > Dilater > 7px et remplissez le de couleur grise #DBDBDB et déplacez votre sélection de 1px vers la gauche puis 1px vers le haut puis touche Suppr. de votre clavier et nommer ce calque �??Contour oeil�??.

Pour faire l�??oeil gauche c�??est très très simple il vous suffit de sélectionner le dossier �??OEIL�?? et de le dupliquer puis d�??aller dans Edition > Transformation > Symétrie axe horizontal et de le déplacer vers la gauche et ce qui va donc vous donner le résultat suivant:

Une dernière petite chose il va falloir retourner la pupille gauche donc sélectionnez le dossier �??Pupille�?? qui se trouve dans l�??oeil gauche et faites Edition > Transformation > Symétrie axe horizontal afin de rétablir les reflets.

6/
Et pour terminer notre fantôme nous allons faire une ombre sous celui çi. Pour cela créez un calque au dessus du fond et prennez l�??outil Ellipse de sélection et faites ceci:

Remplissez cette sélection de noir #000000.

Maintenant allez dans Filtre > Attenuation > Flou gaussien > 25px.

Et pour finir baissez l�??opacité de ce calque à 50% et prennez l�??outil Déplacement et cocher la case �??Option de trans.�?? et ajustez cette ombre de facon à obtenir ceci:

Voilà le résultat final:

Et hop!! encore un nouvel habit, certains y reconnaitront une “bonne base” d’un ancien thème et c’est normal car c’est le cas, bref.

Pour l’occasion j’ai également fait la m.a.j du blog et ajouté un plugin pour noter les articles, wp-postratings, j’ai aussi modifié l’organisation du côté des tutoriaux maintenant ce sera des “articles normaux” enfin je veux dire qu’ils ne seront plus rédigés sur des pages, voilà.
Et le tout sans planter ma bdd

A bientôt.

Réaliser très simplement une fausse 3D sur du texte ou autre avec Photoshop CS2.

1/ Ouvrez un nouveau document et le remplissez le avec la couleur #575757 puis nommé le �??Fond�??.

2/ Sur un nouveau calque et avec l�??outil texte et la police de votre choix faites votre lettre ou texte, nommé le �??Texte�??.

3/ Une fois que votre texte/lettre est prêt, il faut pixeliser votre calque (clique droit sur le calque puis pixeliser le texte). Maintenant allez dans Edition / Transformation / Perspective et placez votre texte comme vous le souhaitez.

4/ Dupliquez votre calque et nommé le �??Texte_fond�?? et sur celui d�??origine (soit celui du dessous) vous allez modifier:

- Lueur interne

- Incrustation en dégradé

Lueur interne:

Incrustation en dégradé

Et voilà le résultat:

Copiez le style de ce calque et coller le sur celui du dessus �??Texte�??.

5/ Prennez l�??outil Déplacement et sélectionnez le calque �??Texte_fond�??.

Maintennez la touche Shift enfoncée et déplacez votre calque 1 fois vers le bas puis 1 fois vers la gauche, maintenant relâchez la touche Shift.

Avec la touche Alt enfoncée vous allez commencer par appuyer 1 fois sur la touche droite de votre clavier puis 1 fois sur la touche haut et répeter cette opération jusqu�??à repositionner votre calque �??Texte_fond�?? de manière à obtenir le rendu d�??un 3D.

Maintenant vous avez pleins de calques car chaque fois que vous avez appuyé sur une touche directionnel un nouveau calque c�??est formé. Donc pour simplifier tout ça vous maintennez la touche ctrl enfoncée et faites un clic droit sur tout les calques que vous vennez de créer, et direction Calques / Fusionner les calques.

Normalement vous devez avoir 4 calques, le calque de �??Fond�??, le calque �??Texte_fond�?? et le calque �??Texte�??.

Revenez sur le calque �??Texte�?? puis appliquez lui un Biseautage et estampage:

6/ Pour faire l�??ombre portée vous allez sélectionner le caque �??Texte_fond�?? et avec la touche ctrl enfoncée faites un clic gauche sur la vignette de votre calque puis créez un nouveau calque au dessus de �??Fond�??, nommé le �??Ombre portée�?? et remplissez la sélection avec du noir.

Désélectionnez et décalé ce calque de 2pixels sur la gauche puis de 2pixels vers le bas et allez dans Filtres / Atténuation / Flou gaussien avec un réglage de 2.5pixels.

Gommez la partie droite de la lettre/texte afin d�??obtenir ce résultat:

7/ Pour les ombres des tranches prennez l�??outil Lasso polygonal et faites ces sélections:

Créez un nouveau calque au dessus de �??Fond�??, avec l�??outil dégradé linéaire et comme réglage d�??opacité: 100% à gauche et 0% à droite. Vous allez remplir les sélections comme sur le shéma (pour la couleur c�??est pas important ça sera règlé après)

Ce qui doit vous donner ça:

Et pour finir changez la couleur dans le Style de calque et mettez celle là: #2f4303 .

8/ Pour faire une lueur en bas il vous suffit de faire un �??clic gauche+ctrl�?? sur le calque �??Texte�?? puis de créer un nouveau calque au dessus de celui-çi, et prendre l�??outil Pinceau en forme ronde de diamètre 150 environ et de dureté 0% avec la couleur #d4f58d.

Faites comme çi-dessous:

(Cliquez 2 fois pour la couleur)

Et maintenant passez ce calque en mode Lumière ponctuelle et nommé le �??Lueur_texte�??.

9/ Recommencez un clic gauche+ctrl sur le calque �??Texte�?? et allez dans Sélection / Modifier / contracter de 1pixel. Créez un nouveau calque au dessus de �??Lueur_texte�?? nommé le �??Reflet_droite�?? et remplissez la de blanc.

Sans désélectionner décalez votre sélection de 1pixel vers le bas puis de 1pixel vers la gauche et maintenant un petit coup de touche Suppr.

10/ Pour les reflets du dessus prennez l�??outil Plume et faites un tracé ressemblant à ça, enfait le plus important ce trouve au milieu de la lettre (en rouge)

Transformez votre tracé en sélection et créez un calque au dessus, nommé le �??Reflet_dessus1? et remplissez de blanc. Revenez sur votre calque �??Texte�?? et faites un clic gauche+ctrl et inversez votre sélection. Sur le calque avec notre sélection blanche faite un petit coup de touche Suppr. et baissez l�??opacité de ce calque à 15%.

11/ Encore un petit reflet. Bon retour sur le calque �??Texte�?? avec un clic gauche+ctrl puis créez un calque au dessus de �??Reflet_dessus1? et nommé le �??Reflet_dessus2? et avec l�??outil dégradé linéaire faites un dégradé comme çi-dessous:

Opacité 100% à gauche et de couleur blanc et opacité 0% à droite.

Résultat:

12/ Répétez l�??étape 9 mais cette fois çi déplacé votre sélection de 1pixel vers la droite et 1pixel vers le bas et toujours la touche Suppr.

Et voilà c�??est fini!!!

Enfin presque car après vous pouvez encore rajouter des choses: brushes, reflets,etc�?� mais faites quand même attention à ne pas trop surcharger votre texte ou lettre, voilà un exemple avec des brushes:

Une manip photoshop du genre très rapide pour passer d’une peau en noir et blanc à une peau en couleur.

Ouvrir le document concerné, pour l’exemple j’ai utilisé cette photo de zenibyfajnie trouvée sur Deviantart.com.

Sur un nouveau calque (au dessus de la photo) il va falloir sélectionner toutes les zones de peau de cette charmante demoiselle et remplir cette sélection avec cette couleur #fcc89d. Pour cela j’ai utilisé l’outil Lasso polygonal avec un Contour progressif de 1px.

Pour voir le résultat c’est très simple il faut mettre ce calque en mode Incrustation.

Et voilà c’est fini!! Après à vous de voir si vous souhaitez d’autres petits réglages.

Voiçi un petit tuto pour la création et l’intégration d’un menu de navigation pour un site.
Nous allons commencer par la partie graphique puis ensuite la partie Html et css, amusez-vous bien.

Création et intégration d’un menu de navigation pour un site.

1// création de la partie graphique.

1/ Pour commencer ouvrir un nouveau document en 300*30 pixels et remplissez le de noir (#000000)

Dans la palette de calque double cliquer sur celui çi et dans Incrustation de dégradé faites comme ça:

Résultat:

2/ Passons maintenant aux boutons,

Avec l’outil Texte écrivez Accueil avec comme couleur #d8d8d8 peut importe la police utilisée on ne se servira pas cette partie pour la découpe des images.

créer un nouveau calque au dessus de celui-çi et avec l’outil Rectangle de sélection faites un sélection de 1px de large environ au même endroit.

Remplissez de noir (#000000) puis double cliquer sur ce calque dans la palette des claques et direction Incrustation de dégradé.

Résultat:

Créer un Dossier dans la palette de calques et le nommer link puis mettre les calques “texte” et “border” dedans.

Dupliquer ce Dossier (link) et renommer le nouveau dossier hover puis déplacer ce dossier pour obtenir le même résultat que sur la capture ci-dessous.

3/ Nous allons passer à la création d’un petit plus au moment du passage du curseur sur le bouton.

Créer un nouveau dossier dans le dossier hover et le nommer marqueur.

Zoomer à 500% puis avec l’outil lasso polygonal faites une sélection comme ci-dessous puis la remplir avec du blanc:

Double clic sur ce calque et direction Incrustation de dégradé.

Puis un petit coup d’ombre portée.

Voilà le petit marqueur pour le passage du curseur est fini.

La partie “création graphique” est terminée.

2// Découpe des images.

Rien de bien compliqué dans cette étape, pour commencer il va falloir créer un nouveau calque au dessus du dossier Hover.

Avant il va falloir masquer le calque de texte “Accueil” dans le dossier Hover puis aller dans Image puis Appliquer une image… Dans la fenêtre qui vient d’apparaitre vous avez OPERATION il faut mettre NORMAL et ok.

Maintenant avec l’outil Rectangle de sélection vous allez faire une sélection de 1px comme ci-dessous:

Aller dans Edition puis Copier. Créer un nouveau document bg_nav (faites directement ok à l’ouverture de la fenêtre, sans rien changer).

Maintenant direction Edition et Coller.

Pour finir enregistrer comme ceci bg_nav.jpg le background qui va vous servir pour la navigation dans le dossier images ou vous stockez les vôtres.

Pour le petit marqueur ca va être pareil, revenez sur le calque ou vous avez appliqué l’image et faites une sélection comme ci-dessous:

Dans Edition faites Copier puis ouvrez un nouveau document sans rien changer dans les propriétés et allez dans Edition et Coller.

Résultat:

Enregistrer cette images comme ceci: “hover.jpg” dans le même dossier que celui contenant le background.

La découpe est terminée.

3// montage html et css.

Dans votre code html il va falloir ajouter cela:

<div id="nav">
<ul>
<li><a href="http://" title="Accueil">Accueil</a></li>
</ul>
</div>


Maintenant dans votre feuille de style (css) ajouter cela:


#nav {
width: auto;
height: 30px;
position:relative;
display:block;
background: transparent url("images/bg_nav.jpg") repeat-x;
border-top: 1px solid #000;
}
#nav ul {
height: 30px;
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
display:block;
float:left;
margin:0;
}
#nav ul li a, #nav ul li a:visited {
display:block;
float:left;
padding:6px 20px 0 20px;
background: transparent url("images/border.jpg") no-repeat top right;
color: #d8d8d8;
height: 30px;
text-decoration: none;
}
#nav ul li a:hover {
color: #fff;
text-decoration: none;
}
#nav ul li:hover {
background: transparent url("images/hover.jpg") no-repeat top center;
}


Et voilà le tuto est fini, amusez-vous bien

Vous pouvez télécharger une archive contenant tout le tuto >> DarkarroW