Pixelmed's Blog

quelques sites pour vous inspirer

pixelmed — Sat, 17 Apr 2010 08:59:39 +0000

voila une petite sélection de quelques sites très bien réalisés.

creanto

ktcn

Nue Media

Carol Rivello

W.O.W

Concepteur graphique algérien

pixelmed — Thu, 31 Dec 2009 18:32:40 +0000

comme le titre l’indique en algérie on voit de plus en plus de monde qui s’intérrése à la créations graphique et la photographie en algérie dans ce post je réunnis quelques uns de nos précieux artists à vous de chercher les autres

younes ze

- son portfolio
- son tiwtter

salam

viva la vida

nice world

my sweet space

hamoud aissam

- Son site
- Son Portfolio
- Son Tiwtter

About Obama speach

Stop it now

Illusion of Change

maktoufo

- Son Portfolio

algeria sparks

sytoureg

happy new year

Benabadji Samir

- Flickr
- Son Portfolio

an old 50′s Sci-Fi Poster

Jump !

Digital Love

Amir Mabrouki

- Son Site
- Son Portfolio

« S »

Oil

Naib Khireddine

- Son Portfolio

logement F3 T01

villa CS1

Ecole d’art

Salim Zaroual

- Son Blog
- Son Portfolio

Ofogh reynante

My dreams world

No mafia underground

i hope you like it …

+30 incroyable pinceau Pour Photoshop

pixelmed — Mon, 31 Aug 2009 14:54:36 +0000

Les Pinceaux de Photoshop sont puissants et très pratique dans ce post, je réunis quelques-uns des meilleurs sur le web .

Hi-Res watercolor set II

Winter Breeze

High Res Splatter

The grunge

Hi-Res Mess

Abstract Brushes 13

ULTIMATE BRUSH PACK NO 4

Dirty Sprays

Abstract Brushes

Shad0ws Blood

Splatter Brushes

Crispy Cracks Grunge

Ecol Brushes

free acrylic photoshop brushes

Splatter Brushes

Bubble brush

Real Brush Strokes Set

Grunge Brushes 3

Splatter brushes

Metal-CX’s Fractals III

IceCracks Fractal Brushes Set1

Sparkle Brushes

Smoke Brush Set

5 Abstract Brushes

Psionic Storm

Euphoria Brushes

high-res ink splatters

Abstract Smudge Brushes

Cracked Desk 2of2

Grinder Sparks

Liens vers d’autres sites

l’illustration en quelques étapes

pixelmed — Thu, 27 Aug 2009 13:11:11 +0000

Dans ce billet je vais mettre les prcessus à suivre pendant l’illustration d’un dessin …

Étape 1

la première chose à faire ( après avoir dessiner son caractère bien sure ) c’était « d’encrer le dessin » pour cela un petit passage par photoshop nous donne un résultat assez bon.

Étape 2

Importer son dessin sous illustrator.et commencer à dessiner les grandes lignes à l’aide de l’outil « l’outil plume » dans un calque à part.

j’ai mis le dessin au dessous de tous les calques et j’ai réduit sa opacité

Étape 3

J’ai commencer à colorer la peau pour les couleurs le site kuler est la référence.

Étape 4

l’ajout de plus de détail.

pour les cheveux il faut seulement créer un pinceau et dessiner avec sur la partie supérieur de la tête

Étape 5

Ajouter de la lumière aux cheveux et au visage

Résultat Finale

une plus grande
voila j’espère que vous avez aimé le travail a+

Utiliser l’API de Google Maps

pixelmed — Sun, 23 Aug 2009 12:12:17 +0000

Un petit tutoriel sur l’utilisation de l’api de Google maps dans un site personnel..

Télécharger la source Site En ligne

Obtenir votre clé personnel

- Cette Étape est importante car la clé de votre site est unique et n’est pas utilisable dans un autre site.
- donc référer vous ici et cliquer sur « Sign up for a Google Maps API key ». accepter les conditions d’utilisation ensuite entrer votre nom de domain et cliquer sur generate key.
- dans la partie « JavaScript Maps API Example » copier votre code qui contiendra votre clé. pour moi c’est

Créer le fichier html

- créer un nouveau fichier html et insérer le code suivant avec votre clé biensur :

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Google API

- pour le css.
#wrap{ width:1000px; margin:0 auto; } #map{ width:800px; height:300px; margin:0 100px; }
- donc pas grand chose seulement un div « wrap pour centrer la page et un div « map » vide pour notre map.

Les fonctions Google Maps

dans la partie « » insérer le code suivant :
$(function(){ //Quand le Document sera pret if (GBrowserIsCompatible()) { // Si le navigateur est compatible sinon ne rien faire. var map = document.getElementById("map"); //Créer une nouvelle variable avec comme valeur l'ID du div "map" var m = new GMap2(map); // la variable m qui contient une nouvelle map et comme argument la variable précédente m.setCenter(new GLatLng(35.700565, -0.635004), 11); // Cette fonction et pour centrer la map avec vos coordonée et le zoom "11" m.addControl(new GSmallMapControl()); // ajouter l'outil de zoom à la map m.addControl(new GMapTypeControl()); // ajouter l'outil de changement du type de la carte m.openInfoWindow(m.getCenter(),document.createTextNode("j'habite ici")); // Un petit message } });
- ce sont les fonctions de base pour utiliser la map.

Résultat

Télécharger la source Site En ligne

Thème wordpress : wp-pix

pixelmed — Tue, 18 Aug 2009 13:11:37 +0000

Salut
voila j’ai crée un thème pour la plateforme wordpress sous le nom wp-pix.
voici un petit résumé de ce que c’est.

Le thème En ligne

une image du thème

- Le thème est sous la liscence GPL.
- valide xhtml/css.
- Compatible avec tous les navigateurs IE6 Inclus.
- Compatible avec wordpress 2.7+.
- un fichier aboutme.php pour résumer qui vous êtes ou ce que vous faite.
- le thème est widget ready.
- Psd du header inclus pour changer le logo avec le votre.

Télécharger le Thème ici

Cartoon : Strange and creepy

pixelmed — Sat, 08 Aug 2009 10:24:08 +0000

Sheharzad Arshad (Zad) est le directeur artistique de chez Oddly Studios Inc,Sa spécialité dans l’animation et l’illustration le rend très talentueux vous pouvez savoir plus sur lui dans le site des sutios Oddly ou/et aussi voir ses travaux dans son deviantart….

Création d’un site trés simple Partie II

pixelmed — Thu, 06 Aug 2009 13:40:33 +0000

Dans cette deuxième partie comme promis on va continuer notre petit projet et convertir le psd en un document xhtml.

Le résultat Finale

Voici ce que vous allez créer

cliquer sur l’image pour voir une démo live.

Ce qu’il vous faut

Le document PSD. vous pouvez suivre le tutoriel
ici ou bien télécharger le document là

Un Editeur HTML même le bloc-notes fera la faire sinon référer vous
ici vous trouverez plien d’autres éditeurs
Une tasse de thé parce que le tutoriel est très long
Niveau : Débutant/intermédiaire

Hiérarchie de notre site

donc un dossier « clean » qui contient :

un dossier « img » pour nos images
un dossier « style » qui contient de son tour un fichier « style.css »
un fichier « index.html » pour la page d’accueil

Étape 1

Découpage du Template PSD

puisque le site est très simple on aura besoin que de trois photos.
- ouvrez le Template PSD dans photoshop.

La barre de navigation

- prenez l’outil de recadrage ou appuyez sur « c » puis faite une sélection comme la mienne. et appuyez sur Entrer.

- si vous faite une mauvaise sélection appuyer sur « Echap » et recommencer.
- Noter que la sélection reste dans la barre de navigation ainsi que la largeur ne doit pas être très grande. ( Environ 8px pour moi )

- maintenant qu’on à cette petite photo faite un « Ctrl+Alt+Shift+S » ou aller dans « Fichier->Enregistrer pour web et… ».
une boite de dialogue s’affiche mettez les réglages présentés dans la photo suivante et appuyer sur « sauvegarder ». et Enregistrer la photo sous le nom de « nav » et mettez la dans le dossier « img ».

- la boite de dialogue s’en va.
- Toujours sous photoshop faite un « Ctrl+Alt+Z » pour retourner à la dernière modification.

Le Banner

- faite une sélection à nouveau autour du banner avec l’outil de recadrage ou appuyez sur « c », puis appuyez sur Entrer.

- Noter l’espace laissé après le banner,c’est seulement pour avoir un ombre au dessous du banner.

- maintenant il faudra désactiver le calque qui contient le texte pour cela dans la palette « calques » décocher l’œil du calque.

Ainsi vous aurez une image comme ça.

- faite à nouveau un « Ctrl+Alt+Shift+S » ou aller dans « Fichier->Enregistrer pour web et… ».
- Mettez les réglages suivant et cliquer sur « sauvegarder ».

- Nommer la banner et valider.
- faite un « Ctrl+Alt+Z » pour retourner à la dernière modification.

Le footer

- recadrer le document comme suit en sélectionnant seulement quelques pixels du footer.

- faite « Ctrl+Alt+Shift+S » et enregistrer l’image sous le nom « footer ».

maintenant qu’on a les 3 images.Fermer photoshop.

Étape 2

Le contenue du fichier index

- ouvrer le fichier « index.html » et mettez le code suivant.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Clean and Simple

- Ce qu’on à fait :
pas grand chose on mis un doctype,un titre ainsi que le lien vers le fichier « css » qui est trés important.
- Ce qu’on a besoin :
Quatre div :

div avec un ID « nav »
un div avec un ID « banner »
un div avec un ID « container »
Et le tout dans un div avec un id « wrap » pour centrer la page dans le milieu

voici le code à insérer après la balise ouverte « body ».

- dans le div « nav » mettez le code suivant pour les boutons.



HOME


DOWNLOAD


FORUMS


CONTACT

donc une liste avec quatre liens vides.
- dans le div « banner » mettez ce code :





Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur....


Pixelmed

- un paragraphe avec un ID pour le déplacer après.
- un lien avec comme classe « fr » pour le floater à la droite.
- dans le div « container » mettez :





SERVICES


A PROPOS


EXEMPLES


PAYEMENT








The standard Lorem




But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. 

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure .


Pixelmed

- Une liste non ordonée avec un ID « sidear ».
- un div « main » pour le contenue de la page.
- un lien avec une classe « fr » pour le floater à la droite.

en fin dans le footer metter

Tous drout réservé à pixelmed 2009

Ce que nous avons accomplis

la srouce complète du fichier index.html

Etape 3

Ajouter du style à la page

1 – la mise en forme de la page

- ouvrer maintenant le fichier style.css avec votre éditeur.
- Metter le code suivant :
* { margin:0; padding:0; } html{ font-family:Georgia,Arial,serif; } a{ text-decoration:none; color:white; } a:hover { text-decoration:underline; } li { list-style:none; } .fr { float:right; } #wrap { width:960px; margin:0 auto; }
- la première classe : la marge et l’espace de tous les éléments est mise à 0, la raison de faire ça c’est que par défaut le navigateur accorde à chaque balise de la marge et de l’espace.
- la deuxième classe : pour tous le documents on choisi un seule font qui est « Georgia » et si le client n’a pas ce font la page sera avec le font « Arial » sinon avec le font serif.
- la troisième classe : on enlève le soulignement pour tous les liens et on met la couleur blanche.
- la quatrèeme classe : et si quelqu’un passe la souris au dessus du lien on remet le soulignement.
- la cinquième classe : on enlève la mise en forme des listes reférer vous ici.
- la sixième classe : pour tout les balises ayant la classe « fr » on les float à gauche.
- la septième classe : définir la largeur de la page et la centrer au milieu.

2 – La barre de navigation

- Metter le code suivant :
ul#nav { background:url(../img/nav.gif) repeat-x; height:40px; text-align:center; line-height:40px; } ul#nav li{ display:inline; margin-right:30px; }
- la première classe :
1. la mise en place d’un arrière plan et de le répéter horizontalement.
2. la hauteur de la barre de navigation est mise à 40px respectivement à la hauteur de l’image « nav.png »
3. Centrer les liens au milieu de la barre horizontalement.
4. Centrer les liens au milieu de la barre verticalement pour cela elle doit être égale à la hauter de l’image.
- la deuxième classe :
1. metter la liste dans une même ligne.
2. ajouter de l’espace entre les élements de la liste.

3 – Le banner

- ajouter le code suivant

#banner { background: url(../img/banner.jpg) no-repeat; height:290px; text-align:justify; color:white; font-size:14px; } #banner p#text { padding:100px 50px 0 340px; overflow:hidden; }
- la première classe :
1. la mise en place d’un arrière plan sans le répéter.
2. la hauteur du banner égale à 290px respectivement à la hauteur de l’image « banner.jpg ».
3. j’ai justifié le texte mais vous pouvez ne pas le faire.
4. la couleur est blanche pour tous le texte qui se trouve dans le div banner.
5. on diminue la police de 16px par défaut à 14px.
- la deuxième classe : pour le div « text » qui se trouve dans le div « banner »
1. déplacer le texte,du haut:100px,droite:50px,le bas:0px,la gauche,340px.
2. celle la à pour but de contenir ses éléments.je m’explique comme on à floaté la classe « fr » qui se trouve dans le div « text » à la droite ce dernier sera mise à zéro.

donc une règle à prendre à chaque fois que vous applique un flottement à une balise il faudra que le css la balise mère soit égale à : overflow:hidden.

4 – le contenue

#container { background-color:#ededed; }
on donne seulement une couleur d’arrière plan à la balise « container ».

5 – la sidebar

#sidebar{ float:left; margin:0 0 0 14px; width:184px; background:#676767; } #sidebar li{ height:37px; line-height:37px; text-align:center; border-bottom:1px solid white; }
- première classe :
1. floater la barre à la gauche.
2. ajouter de la marge du coté droite.
3. ajouter une largeur de 184px.
4. une couleur d’arrière plan.
- la deuxième classe : pour liste qui se trouve à l’intérieur du div « sidebar »
1. une hauteur pour chaque élément de la liste.
2. centrer le texte horizontalement.
3. centrer le texte verticalement.
4. appliquer une bordure de 1px avec une couleur blanche.

le main

coller ce code:
#main { margin-left:300px; padding:0 40px 40px 0; color:#939393; } #main h1{ color:#626262; } #main p{ padding:20px 0 0 20px; } #main a{ color:#666; font-weight:bold; font-size:80%; }
- la première classe :
une marge de 300px pour déplacer le texte vers la droite,un peu d’espace et une couleur.
- la deuxième classe :
une couleur grise pour le titre.

Le pieds de la page

#footer{ background:url(../img/footer.png) repeat-x; height:72px; line-height:80px; color:#fff; text-align:center; }
un arrière plan répéter horizontalement et un texte centrer dans le milieu.

Ce que nous avons accomplis

voila la source complète.

Résultat Finale

vous voila avec un site compatible avec tous les navigateurs « vailde xhtml/css ».
vous pouvez voir ici le site en ligne.le lien
télécharger la source ici
j’espère que vous avez appris quelque chose.
si vous aimez l’article,SVP abonner vous à la chaine RSS pour être à jours des derniers posts.

Inspiration Typographique

pixelmed — Wed, 05 Aug 2009 14:35:31 +0000

« La typographie est l’art d’assembler des caractères mobiles afin de créer des mots et des phrases. » wikipedia

dans cet article j’ai choisi quelques excellents maquettes faites pour la typographie j’èspère que vous les aimerez autant que je les aimes

>> kwedo

>> fabianohikaru

>> rachel-speed

>> lemondesign

>> pandikatak

>> postpwned

>> alienbiru

>> yienkeat

>> andrewackroyd

>> grasyang

>> suckerhead

>> clideone

>> candiice

>> fadiawwad

>> razangraphics

Plus d’articles sur la typographie

Appliquer un effet infrarouge avec photoshop

pixelmed — Tue, 04 Aug 2009 12:47:03 +0000

L’un des trucs que j’aime faire avec photoshop est jouer avec les couleurs des photos et leurs contraste,ce que je vous propose aujourd’hui est un petit tutoriel sur les bases de photoshop sur le quelle on va utiliser les calques d’ajustement des couleurs pour créer un effet infrarouge…

Le résultat finale

Avant

Après

La photo utilisée

vous pouvez télécharger gratuitement la photo depuis le site de stock des photos Victoria Lines – Malta ou bien chercher celle qui vous plait.
Les autres site de stock photo.

Les étapes en résumé

Appliquer un calque d’ajustement Noir/Blanc avec effet infrarouge à la photo
Dupliquer la photo et charger sa chaine vert
Appliquer un filtre flou gaussien à cette chaîne
Appliquer un calque d’ajustement Courbes à la Photo

C’est à peu prêt ce qu’on va faire.

Étape 1

- Ouvrer l’image sous photoshop pour cela clique droit sur la photo est choisissez ouvrir avec->photoshop
- une fois fait aller dans « calque->Nouveau calque d’ajustement->Noir et blanc » ou bien en bas de la palette des calques cliquer sur le cercle à moitie noir et choisissez Noir et Blanc.

- dans la fenètre qui s’ouvre Choisissez depuis le Menu Déroulant Noir et Blanc Infrarouge.

Étape 2

- Comme vous pouvez le remarquer la photo est très éclairé ayant toujours la fenêtre Noir et Blanc Ouverte réduire Le jaune et Le vert.

- Sélectionner le calque arrière plan (La photo d’origine) et appuyer sur Ctrl+j pour la dupliquer.
- Nommer la Gaussien.
- Aller dans l’onglet Chaîne qui se trouve à coté de l’onglet Calques. si vous ne la voyez pas aller dans Fenêtre->Chaînes.
- Sélectionner Le calque vert.

- Aller dans Filtre->Atténuation->flou Gaussien…
- Mettez ~ 2,5 px et cliquer sur Ok.
- Sélectionner le calque RVB dans l’onglet Chaînes et revenez à la palette des calques.

Etape 3

- Changer le mode de fusion du calque Gaussien et mettez le sur luminosité.

- Seléctionner le calque arrière plan à nouveau et dupliquer le Ctrl+j puis mettez la copie calque en haut de tous les calques(Cliquer sur le calque et faite glisser vers le haut).
- Changer le mode de fusion du calque et mettez le sur Inscrustation.
- Réduisez l’opacité de ce calque à 80%.
and voila.