$ 12.00

Tuto Créer un site OnePage pour présenter votre activité professionnelle - Partie 1 : LE WEBDESIGN avec Affinity Designer

$ 12.00

  • Une formation vidéo de 2h11m
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans cette nouvelle formation en vidéo Webdesign, nous allons voir ensemble comment designer un site web OnePage qui aura pour but de présenter votre activité professionnelle et les services que vous proposez.

Nous utiliserons pour cela le logiciel de dessin vectoriel, Affinity Designer. Si vous en avez besoin, une version d'évaluation est disponible.

Au programme de ce tuto WebDesign sous Affinity Designer :

  • Aborder un design avec une grille Bootstrap.
  • Réfléchir au système de navigation & aux animations au scroll.
  • Création d’un design complet, en partant du header jusqu’au footer.
  • Imaginer une version responsive du site pour savoir ce qu’il faut designer réellement et ce qui se fera lors de l’intégration.
  • Ranger le fichier dans des groupes bien nommés et dans l’ordre d’affichage.
  • Faire apparaître les effets de hover sur la maquette pour faciliter le travail de l’intégrateur.
  • Découverte du site une fois intégré pour introduire la seconde partie.

Les notions essentielles qui seront abordées dans ce tuto :

  • Utiliser et améliorer une grille Bootstrap.
  • Créer une palette de couleurs personnalisée.
  • Ajouter des guides facilement.
  • Intégrer les icônes de Font Awesome au logiciel.
  • Créer des dégradés, et modifier leur direction, leur étalement.
  • Utiliser plusieurs polices de caractères différentes en fonction des usages.
  • Modifier des textes grâce à la rotation et le skew.
  • Créer des masques sur des images.
  • Appliquer des effets sur des images (noir & blanc, lumière tamisée…).
  • Utiliser des ombres portées, les décaler visuellement, changer leur couleur.
  • Créer un plan de travail et changer la couleur de l’arrière plan.
  • Modifier les dimensions d’un document.
  • Désactiver le correcteur d’orthographe.
  • Jouer avec l’espacement des lettres, les hauteurs de ligne (...) pour améliorer la lisibilité des titres ou des paragraphes.
  • Et bien d’autres choses encore !

A la fin de tuto, vous serez capable de designer un site OnePage structuré, et de l’améliorer en fonction de vos besoins et de votre activité professionnelle.

Vous trouverez dans les sources tout ce dont avez besoin pour refaire le design du site en même temps que la vidéo. C’est à dire : le fichier Affinity Designer avec la grille Bootstrap, les images, les polices, ainsi que la maquette finale. Le tuto a été enregistré sur la version 1.5 du logiciel.

Je reste bien évidemment disponible dans le salon d’entraide pour toutes les questions que vous pourriez avoir, pendant ou après la formation.

Table des matières de cette formation Affinity Designer (durée : 2h11m)

    • Intro, grille bootstrap et palette de couleurs 00:14:48
    • Partie ACCUEIL : logo, image de fond et menu 00:28:32
    • Partie A PROPOS : icones, paragraphes, bouton 00:11:56
    • Partie EQUIPE : images, masques, et opacité 00:12:02
    • Partie DEVISE : parallax, masque, ombre portée 00:05:41
    • Partie FOLIO : icones, masques, formes, et effets 00:15:41
    • Partie CONTACT : icones, dégradé, formes 00:12:42
    • Design de la version MOBILE : plans de travail, icone burger, dégradé 00:18:01
    • Conclusion et découverte du design une fois intégré 00:12:03



Formateur : Adrien Gazaix

Adrien Gazaix a publié 103 tutoriels et obtenu une note moyenne de 4,7/5 sur 25 202 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

4,3
note moyenne

4
avis laissés
5 étoiles
1
4 étoiles
3
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de karloss laissé le 12/08/2017
    Tuto super intéressant qui me fait poser la question de garder ou non l'abonnement ADOBE !!
    "Merci pour ton retour ! Effectivement on peut se poser la question pour tout ce qui est maquette web. Après si tu fais de l'édition, de la mise en page, je pense qu'Illustrator est encore un cran au dessus, surtout pour ce qui export PDF."

  • 4
    avis de pluchon laissé le 11/08/2017
    Très chouette tuto. Clair et précis. J'attend avec impatience la partie 2 concernant l'intégration mais je crains que pour cette deuxième partie, il faille de solides connaissances HTML et CSS. Ce que je n'ai pas :-(
    "Pas de soucis à se faire, j'essaierai de penser aux débutants quand j'enregistrerai la 2ème partie de la formation. Sinon j'ai fait d'autres tuto pour apprendre le HTML/CSS qui peuvent être un bon apprentissage avant de se lancer sur la suite de celui-ci. A bientôt :)"

  • 4
    avis de s3bln laissé le 11/08/2017
    Très intéressant. J’attends avec impatience la suite. Peut être également dans le future d’autres formations sur affinity designer pour par exemple designer des CVs et apprendre à utiliser d’autres outils.
    "Merci à toi ;) Et pourquoi pas d'autres formations sur ce logiciel, que j'affectionne particulièrement."

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Affinity Designer
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1577 tuto gratuits


non, je ne veux pas me former gratuitement