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

Fermer



Connexion

Formations sur-mesures…

  • Basées sur des programmes solides
  • Adaptées pour répondre à vos besoins
  • Animées par des formateurs issus des entreprises
  • Intégrant le background des participants avec une pédagogie pro-active
  • Associant vos objectifs  et contraiintes de production
  • 20% sous les tarifs usuels
  • Éligibles  à la prise en charge des OPC

Pour une étude gratuite Demandez nous!

Coaching post-formation

  • Vous bénéficierez d'une Hotline directe avec le formateur qui vous coachera amicalement
  • Vous pourrez compter sur lui pour vous aider à résoudre vos petits soucis
  • Vous serez tenu régulièrement au courant des évolutions de votre métier
  • Vous serez intégré à notre réseau d'alertes et de tutoriels
  • Et ce service est gratuit!

Pour une étude gratuiteDemandez nous!

Audits concrets

  • Les solutions pour un site marchand?
  • Optimiser les Cms : Joomla Drupal Worpress, Hikashop, Prestashop ?
  • Développer un Community Management rentable?
  • Créer un  Réseau Social d'Entreprise?
  • Tester l'ergonomie d'un site?
  • Évaluer les rédactionnels?
  • Optimiser pour les moteurs de recherche?

Demandez un devis gratuitDemandez nous!

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

Nous concevons pour vous tous types de sites sous Joomla : Sites institutionnels, e-commerce, communautaires, associatifs…

Les avantages d'un site sous Joomla

  • 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.
  • Votre site est interactif est consultable sur périphériques mobiles : smartphones, tablettes…

Que peut-on faire avec un site sous Joomla ?

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 sont facilement intégrables : Petites annonces, Forums et Communautés, Vente en ligne, Gestion d'événements, Manifestations sportives, pré inscriptions, menus des cantines…

Combien ça coûte ?

48cash0 € : Vous pouvez bénéficier d’une prise en charge totale par votre organisme de formation professionnelle, car le site peut être déployé avec vous lors d'une session de formation
Vous n’avez alors rien à payer : nous sommes réglés directement par votre organisme collecteur (Agefos, Agec, Afdas…). Pour des projets complexe, les budgets sont en général inférieurs de moitié aux solutions propriétaires.

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 ?

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

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). Vous avez totalement la main sur votre site.

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.

Avec Xdata

XData  pour Xpress (comme InData pour InDesign) est le meilleur plug-in pour réaliser des mises en pages automatiques à partir de données tabulaires (Excel par exemple). Nous travaillons en production avec ce logiciel et formons à son utilsation depuis 1995.

Avec XData (ou Indata)…

  • Flora édite des catalogues de vins en 5 langues
  • Cédric imprime des DVD personalisés
  • Sylvie publie des guides de gites ruraux
  • Fabienne édite des annuaires professionnels

Pour en savoir plus

Pour savoir comment réaliser votre projet de mise en page automatique

Partenaires

Licence MCI partenaire Freeeport

LIcnece Marketing et Commerce sur Internet de l'IUT d'Evry

Ici formation partenaire Freeport

ICI Formation est l'annuaire national de référence pour la formation continue, le droit individuel à la formation (DIF), le bilan de compétences , l'outplacement et la validation des acquis de l'expérience (VAE).

Infos-Support

Appelez-nous par Skype
call didiermazier
C'est gratuit!

Qui est en ligne?

Nous avons 32 invités en ligne

Tutoriels Photoshop gratuits

Appliquer une image : opération sur les couches

Menu Image > Appliquer une image. Dans les versions anciennes de Photoshop (avant la 6), on se servait beaucoup de cette fonction. Maintenant elle est un peu délaissé, à tort… la preuve!  

Un packaging paquet de lessive!

D'accord ce n'est pas de très bon goût, mais au moins ça impacte! Voici comment réaliser cet effet pour vos flyers, cartes de visites, CV (avec ça vous êtes sûrs d'avoir le Job).

Photo rétro avec Lightroom, Photoshop, Camera raw…

On en a tous marre des superbes belles photos numériques bien léchées! On a tous la nostalgie de nos vieux Instamatics, de nos Dacora Dignette et autres appareils offerts par Pif Gadget! Voici comm...

Triple Outline et taches 2/2

Suite et fin : pour accentuer ce titre et donner un effet trash à la Titeuf, vous pouvez utiliser les formes prédéfinies. Mais comment faire une tâche? Ouvrez Illustrator, même si vous ne savez pas...

Des Noirs et Blancs qui ont la pêche avec Photoshop!

Vous trouvez vos images plates? Nous vous expliquons comment produire de magnifiques clichés noirs et blancs.

Un portrait style Studio Harcourt (1)

Vous ne pourrez jamais reproduire la touche inimitable du studio Harcourt, mais avec un peu d'astuce, une photo pas trop mal prise pourra faire illusion grâce à Photoshop. Voici comment rendre homm...

Vassarely ou Wharol avec Photoshop!

Voilà un beau canapé comme Vassarely en rêvait. Avec Photoshop vous allez le réaliser en quelques minutes en utilisant le Filtre Dispersion, les calques et masques et les modes de fusion. Un bon...

Mettre en page avec des ombres

Créer une ombre et l'appliquer à un contenu Texte/Image est assez facile avec Photoshop. Dans ce tutoriel,  vous allez apprendre à le faire de façon non destructive. Au programme : Amélioration...

Détourage : La CS5 ça change tout!

Avec Photoshop CS5 mettez à la poubelle tous les tutos sur le détourage que nous avons faits depuis 15 ans! Les bases restent les mêmes sauf que maintenant il n'y a plus qu'à cliquer grâce au nouvel...

La Pub Clarins en 5 mn

Au premier plan la feuille est en couleurs. La fille est en bichromie (pas vraiment du noir et blanc).  Et pour finir sa main est nette mais le visage est légèrement estompé.

L'élégance du gris… riche avec Photoshop

Ce logo a été créé avec Photoshop en moins de 10 minutes. Chut, il ne faut pas le dire, on l'a vendu 30 000 euros… Non ce n'est pas vrai. encore que… Voici comment vous allez opérer.

Verre de champagne transparent avec Photoshop

Récupérer la transparence sur une photo est simple avec Photoshop. Voici les étapes à suivre. À vous de les adapter ensuite à vos cas particuliers.

En pirogue rue de Rivoli

Si vous avez vu la pub pour le Salon Nautique, vous vous demandez comment on a pu inonder la rue de Rivoli et y mettre un Hors Bord. Nous allons faire la même chose avec un cayuco amazonien… et...

Récupérer un mauvais contre-jour

Camera Raw et les objets dynamiques vont nous permettre de régler le problème de cette photo à contre-jour. Le petit oiseau va sortir.  

Dessin d'automobile old style

Dessiner avec Photoshop, sans savoir dessiner… Une belle photo et quelques clics suffisent…

Écrire sur du sable

La pub d'un vendeur de frigo qui commence par un DAR et qui se finit par un TY montre un slogan écrit dans le sable. Comment le faire de façon réaliste?  

Crever l'écran

Vu et revu, certes, mais cet exercice est excellent pour comprendre les onglets avec Photoshop CS4 ainsi que la transformation paramétrée. Enfilez vos life jackets et on y va.  

Un reflet pour vos produits

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

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.

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.

  • Appliquer une image : opération sur les couches

  • Un packaging paquet de lessive!

  • Photo rétro avec Lightroom, Photoshop, Camera raw…

  • Triple Outline et taches 2/2

  • Des Noirs et Blancs qui ont la pêche avec Photoshop!

  • Un portrait style Studio Harcourt (1)

  • Vassarely ou Wharol avec Photoshop!

  • Mettre en page avec des ombres

  • Détourage : La CS5 ça change tout!

  • La Pub Clarins en 5 mn

  • L'élégance du gris… riche avec Photoshop

  • Verre de champagne transparent avec Photoshop

  • En pirogue rue de Rivoli

  • Récupérer un mauvais contre-jour

  • Dessin d'automobile old style

  • Écrire sur du sable

  • Crever l'écran

  • Un reflet pour vos produits

  • Studio Harcourt (3) : La cabine!

  • Dessin à partir d'une photo avec Photoshop