Création d’un Logo Web 2.0

Dimanche 5 octobre 2008

Catégorie : WebDesign

Bonjour,
voici un petit tutoriel pour vous expliquer comment réaliser un logo style Web 2.0 qui est la grande “mode” du moment.

Ce tuto se déroulera sous PhotoShop mais est également adaptable sur d’autres logiciels.

1 - Ouvrez un nouveau document (ctrl + n) de 450px*150px par exemple.

2 - Ecrivez le texte souhaité, pour l’exemple j’utilise deux couleurs différentes pour bien souligner mon pseudo “John Style” le fait de jouer comme cela avec les couleurs permet de donner un effet visuel plutôt sympa, toutefois évitez les couleurs trop vive.

3 - Dirigez-vous vers la palette des calques et double cliquez sur le texte.

4 - Faites les réglages suivant, pour obtenir un effet d’ombre et un contour sur le texte.

5 - Validez puis revenez sur la palette des calques, créez un nouveau calque (bouton en bas de la palette ou Maj+ctrl+n). Placez ce nouveau calque au dessus des autres (clique+glisse).

6 - Toujours dans le palette des calques, sélectionnez le texte puis faites ctrl+clique ce qui sélectionnera le texte sur votre document.

7 - Gardez le texte sélectionné et allez dans le menu => Sélection => Modifier => Dilater. Saisissez 1 comme valeur puis validez. Nous venons d’étendre notre sélection de 1px.

8 - Retournez sur la palette des calques et sélectionnez le calque précédemment créé, ensuite rendez-vous sur la palette d’outils et sélectionnez l’outil “dégradé”.

9 - Sur votre document, appliquez le dégradé sur la zone sélectionné auparavant clique+glisse vers le bas+Maj pour avoir un dégradé droit, vous devriez obtenir ceci :\

10 - Ensuite nous allons rendre le reflet plus jolie  :smile: , dans al palette outils, sélectionnez l’outil “ellipse de sélection” juste en dessous de “rectangle de sélection”. Puis créez une sélection sur votre document comme ceci:

11 - Sur cette sélection faites clique droit => intervertir, puis supprimez.

12 - Pour finir, sur le calque du dégradé appliquez une opacité de 70% (”opacité” en haut de la palette des calque).

Et voilà, vous venez de créez un Logo Web 2.0 !

Lire la suite...

Créer des onglets facilement

Dimanche 5 octobre 2008

Langage : JavaScript - Type : Script - Niveau : Débutant

Voici un script permettant de créer très facilement des onglets.
Nous allons utiliser 3 langages :

La struxcture XHTML, qui met en page les onglets. Cette structure est divisé en deux partie, la partie haute regroupant les onglets <div id=”mes_onglets”></div> et la partie basse regroupant les contenus à afficher <div id=”mes_contenus”></div>

Voir le code

Le CSS contenant toutes les classes nécéssaires à l’apparence des onglets.

Ce code doit être placé entre les balises <head></head> de la structure xhtml.

Voir le code

Et le javascript qui va rendre nos onglets dynamiques.

Nous avons une fonction changeOnglet(); qui, lorsque l’on clique sur un onglet, change le statut de tous les onglets.

Ce code doit être aussi placé  entre les balises <head></head> de la structure xhtml.

Voir le code

Lire la suite...

Johnstyle.fr fait peau neuve !

Samedi 4 octobre 2008

Catégorie : Actualités

Bonjour,
l’ancien blog johnstyle.fr était un blog “généraliste” ont y trouvait de tous (vidéos, acticles sur Lyon et développment web, etc..).

Depuis quelques mois, j’ai mis en place de nouveaux sites sur des thémes bien précis. Les vidéos en streaming sont dorénavant publiés sur StreamingVideos.fr et les articles sur ma ville de Lyon sont publiés sur LyonMagazine.fr.

J’ai donc décidé de repartir sur de nouvelles bases pour Johnstyle.fr en supprimant toutes traces de l’ancien blog ainsi qu’en mettant en place un nouveau design plus “sobre”.

Vous voici donc sur mon nouveau blog réservé exclusivement au développement web.

Vous trouverez ici des conseils sur la programation dans les différents languages que j’utilise (php, javascript/ajax/xml, html/xhtml/css, actionscript).

J’espère que vous trouverez ici des informations qui vous seront utiles.

Bonne lecture !
Jonathan Sahm.

Lire la suite...