Formations web et création graphique - Bouton Web en 5 mn!

Fermer



Connexion

Lightroom - les bases

Vous ne savez pas comment vous avez fait, vous l'avez prise à la volée avec votre iphone, mais la photo est bonne!. C'est précisément avec une bonne photo que vous allez pouvoir faire un très bon...

L'effet Warhol pour vos portraits

Même les plus mauvais photomatons le proposent, alors pourquoi pas vous? Nous allons essayer de le rendre le plus Warholien possible, c'est à dire avec juste ce qu'il faut de trashitude.

Un inconnu vous offre des fleurs

C'est pour la bonne cause : faire le point sur quelques astuces pour convertir en noir et blanc. Je précise : en BEAU noir et blanc.  

Un reflet pour vos produits

5mn montre en main pour cet effet de reflet qui reste à tout moment éditable.

Dessin à partir d'une photo avec Photoshop

Maîtriser les objets dynamiques est utile pour exploiter à fond Photoshop. Nous allons voir ici à quoi ils servent réellement en créant un dessin à partir d'une photo.

Un bouton Call to action pour landing page

Un Bouton "Call to action", qu'est-ce que c'est? Si le vous savez vous allez apprendre à en réaliser un. Sinon, vous allez apprendre ce que c'est…

Un café en Or

Ajouter rapidement des étincelles, des reflets, des brillances… Facile avec les formes prédéfinies de Photoshop. Voici comment les utiliser et les paramétrer au mieux.  

Changez les couleurs des objets avec Photoshop

Le remplacement de couleur est une fonction ancienne de photoshop injustement oubliée. Voici comment changer les couleurs des objets… et des gens!

Détourer pour dynamiser!

Voici comment le détourage partiel pourra faire la différence avec une maquette qui restera sobre tout en gagnant en dynamisme.

Impact visuel avec Photoshop : Contrastes!

L'impact visuel est la qualité numéro un d'un document de communication. C'est l'impact visuel qui fait la différence, que ce soit à l'écrit ou à l'écran. Prenons l'exemple d'une affiche, mais les...

Exploiter une "photo - brochette"

Tous en rang d'oignons, il n'y a rien de pire qu'une photo "brochette" d'édiles, ou de collaborateurs d'entreprise. Voici un piste pour s'en sortir avec Photoshop.

De la photo au dessin : PIxel Bender de Photoshop

Si vous êtes un peu fatigués des filtres créatifs de Photoshop, Adobe Labs vous a préparé un nouvel outil! Pixel Bender permet de triturer les pixels dans tous les sens. Il ne tourne que sous CS5,...

Photoshop pour l'Iphone

Des applications intéressantes pour la photographie apparaissent pour l'Iphone. Évidemment Adobe ne pouvait pas rester les bras croisés. Il y a donc un Photoshop Mobile, complément du Photoshop.com en...

Faites fondre la bouteille

Dans la pub Perrier, la chaleur fait fondre les bouteilles. Vous allez en faire autant avec Photoshop. Pour l'essentiel nous utiliserons le filtre Fluidité. Au goulot, oops au boulot!  

Studio Harcourt (3) : La cabine!

Le test de la cabine Harcourt au MK2 est intéressant. Bien entendu pour 10 euros vous n'aurez pas le même résultat qu'avec un shooting à 3000… Le résultat est quand même sympathique.

J'adore la pub…

Comment faire rapidement la pub J'adore de Dior : Estomper le fond d'une image au noir et surtout effet de texte métallique avec Photoshop? Je vais vous mettre au parfum.  

L'effet Experts Miami

Solarisation, incrustation, filtres, on se demande bien comment ils font. Voici quelques pistes sur Photoshop. Avec After Effects c'est une autre histoire. Dès que Stéphane Nicolle m'aura expliqué,...

La pub Cartier Trinity en 20 mn

Trois empreintes scintillantes en poudre d'or (jaune, gris et rose comme les anneaux de la collection). Ce n'est pas compliqué à monter. Voici quelques pistes à l'arrache en basse def mais qui donnent...

Effet Kodackolor old style

Meilleurs sont les appareils numériques, plus nous avons la nostalgie des veilles photos que nous prenions avec notre Instamatic ou notre Dacora Dignette (made in DDR?). Voici comment à partir d'une...

  • Lightroom - les bases

  • L'effet Warhol pour vos portraits

  • Un inconnu vous offre des fleurs

  • Un reflet pour vos produits

  • Dessin à partir d'une photo avec Photoshop

  • Un bouton Call to action pour landing page

  • Un café en Or

  • Changez les couleurs des objets avec Photoshop

  • Un dessin sans savoir dessiner en 5mn!

  • Détourer pour dynamiser!

  • Impact visuel avec Photoshop : Contrastes!

  • Exploiter une "photo - brochette"

  • De la photo au dessin : PIxel Bender de Photoshop

  • Photoshop pour l'Iphone

  • Faites fondre la bouteille

  • Studio Harcourt (3) : La cabine!

  • J'adore la pub…

  • L'effet Experts Miami

  • La pub Cartier Trinity en 20 mn

  • Effet Kodackolor old style

Votre site mérite le meilleur!

Votre Projet Web mérite un site Joomla Dynamique

un site web plus attractifAttractif un site web plus fonctionnelFonctionnel un site web plus convivialConvivial

Pourquoi un site dynamique ?

  • Vous modifiez et enrichissez le contenu à tout moment sans connaissance technique particulière.
  • Vous changez l’aspect (couleurs, formes) des éléments en un simple clic.
  • Chaque contributeur édite son propre contenu, libérant l’administration de tâches fastidieuses.

Combien ça coûte ?

48cash0 € : Vous pouvez bénéficier d’une prise en charge totale par votre organisme de formation professionnelle.
Vous n’avez alors rien à payer : nous sommes réglés directement par votre organisme collecteur (Agefos, Agec, Afdas…).

Comment se passe la mise en service ?

48lettreNous vous envoyons gratuitement un dossier complet que vous transmettez à votre organisme : convention de formation, itinéraire pédagogique, devis complet.
Une fois l’accord obtenu, vous fixez les dates de votre session de formation. Un formateur se déplace en vos locaux avec le matériel nécessaire. Avec lui vous vous formez à Joomla, configurez le site Joomla et mettez en place les premiers contenus.

Combien de temps cela prend-il ?

48agendaIl  faut une semaine au maximum pour préparer votre site Joomla (hébergement mise en service), puis une formation de trois jours dans votre établissement.

Que comprend le site ?

La configuration de base intègre :

  • Gestion des utilisateurs : Public, Privé, Contributeurs, Administration.
  • Gestion des articles et Blogs
  • Agenda
  • Galeries Photo et Vidéos
  • Documents à télécharger
  • Newsletter (Infolettre par email)
  • Formulaires de contact
  • Géolocalisation

D’autres modules existent : petites annonces, forums, vente en ligne, pré inscriptions, menus des cantines…

Et la maintenance ?

inbox-5Vous êtes totalement maître de votre hébergement et de votre nom de domaine. Dans ce cas le coût annuel est inférieur à 20 euros (chez OVH).

Pour être libéré des contraintes de mise à jour, optez pour une journée de formation annuelle, au cours de laquelle nous faisons ensemble évoluer votre site Joomla en améliorant ses fonctionnalités. Cette journée de formation peut être prise en charge et ne vous coûtera donc rien.

Contactez-nous sans engagement de votre part pour recevoir toutes les précisions complémentaires

Exemples de sites

thumb_001 thumb_002 thumb_003 thumb_004 thumb_005 thumb_006

Bouton Web en 5 mn!

un bouton Web2.0 en 5 mn avec PhotoshopMensonge éhonté, il vous faudra au moins 7 mn!

Remarquez qu'il y a trois trucs intéressants :

  • Le reflet du bas (on l'a déjà traité ailleurs)
  • Les contours
  • Le reflet du haut

Au boulot. Commencez par créer une forme à coins arrondis. Utilisez le rectangle en appuyant sur la touche Maj pour le contraindre à un carré.

un bouton Web2.0 en 5 mn avec Photoshop

Vous obtiendrez un calque de forme.

un bouton Web2.0 en 5 mn avec Photoshop

Cliquez sur la vignette de la forme en appuyant sur la touche Commande (Mac) ou Ctrl (PC). Vous récupérerez ainsi la sélection correspondant à la forme.

bouton Web2.0 en 5 mn avec Photoshop

Menu Sélection > Transformer la sélection

Retournez la carrément. Quand c'est OK double cliquez dedans ou cliquez sur l'icône de validation dans la barre d'options en haut.

bouton Web2.0 en 5 mn avec Photoshop

Vous obtenez aini une sélection pour le reflet. Créez un nouveau calque en appuyant sur la touche Commande (Mac) ou Ctrl (PC) pour qu'il soit en dessous. Si vous n'y arrivez pas, tant pis, positionnez-le dessous manuellement.

bouton Web2.0 en 5 mn avec Photoshop

Remplissez la sélection avec du gris pour commencer. (Édtion > Remplir)

bouton Web2.0 en 5 mn avec Photoshop

Réduisez l'opacité.

bouton Web2.0 en 5 mn avec Photoshop

Créez un masque de fusion et remplissez-le avec un dégradé du noir au blanc.

bouton Web2.0 en 5 mn avec Photoshop

Quand c'est noir ça masque, quand c'est blanc ça passe.

Une fois le reflet mis en place, il ne reste qu'à ajouter les effets au claque de forme.

bouton Web2.0 en 5 mn avec Photoshop

Pour chaque effet voici la visualisation (ajout de l'effet suivant à chaque étape) et les réglages.

Dans l'ordre :

1 - Biseautage et estampage (qui sont les deux mamelles du photoshopeur)

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

2 -  Contour

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

3 - Incrustation en dégradé

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

4 - Ombre interne

bouton Web2.0 en 5 mn avec Photoshop

bouton Web2.0 en 5 mn avec Photoshop

Bien entendu vous pouvez tout faire d'un seul coup, une fois ouverte la boîte dialogue Style de calque.

Il manque encore le reflet sur la partie haute.

Il suffit de tracer un rectangle :

  • à coins arrondis
  • Blanc
  • Mode Superposition
  • Opacité autour des 15%

bouton Web2.0 en 5 mn avec Photoshop

Pour finir, vous pouvez ajouter un contour un peu plus prononcé.

  • Récupérez la sélection de la Forme 1.
  • Placez la sur un calque au dessus.
  • Remplissez-la de blanc et appliquez un contour identique à celui du calque de la Forme 1.

bouton Web2.0 en 5 mn avec Photoshop

Changez le mode de fusion pour Produit (le blanc s'effacera et les contours ressortiront).

bouton Web2.0 en 5 mn avec Photoshop

Un petit texte là dessus et le tour est joué.

bouton Web2.0 en 5 mn avec Photoshop

Si vous enregistrez ce bouton au format PNG (sans l'Arrière-plan, bien sûr) vous aurez une vraie transparence sur le dégradé.

Vous pourrez ainsi le placer sur une page avec un fond de couleur sans problème.

Bises.

À lire!!

Qui est en ligne?

Nous avons 1 invité en ligne
You're settling for good when there's awesome.  Upgrade to Firefox 3.6!