Conception d'un site de portfolio personnel simple

1. Intro: Tout le monde. L' exploitation minière, c'est Olia. Je suis designer. Vous êtes designer UX que je conçois depuis plus de 10 ans maintenant. J' ai eu le privilège de travailler avec diverses entreprises, des petites entreprises locales, des entreprises plusieurs milliards de dollars. Dans ce cours, je vais commencer par une ardoise vierge et vous montrer comment concevoir un site Web personnel et mettre beaucoup de designers font que ça a l'air facile parce qu'ils le font depuis un certain temps. Mais je veux vous montrer à quel point c'est aussi facile, et je veux vous montrer étape par étape comment je le fais. Cette classe est idéale pour les débutants et tous ceux qui sont intéressés par le design, donc j'espère que vous apprécierez les gars. Allons-y. 2. Pour commencer: à droite. Donc, avant de commencer avec anti one pour télécharger fig, MMA, fig MMA est gratuit. Il fonctionne sur Mac sous Windows. J' ai choisi la figure Mark parce que cela fonctionne sur Mac et Windows eso que je ne suis pas en quelque sorte de limiter les gens à un système d'exploitation. Je suis en fait nouveau pour me comprendre, donc j'apprends au fur et à mesure, mais il est très facile de ramasser leur facile à utiliser. Vous savez, si vous êtes coincé sur quelque chose ou que vous voulez apprendre un outil spécifique, ils sont en sorte que la ressource est centre d'aide loin, c'est tout. trucs sont très utiles. J' y télécharge habituellement. Où est-il ? Je télécharge généralement leur bureau vers le haut, même si vous transmettez est ein dans le navigateur. J' aime généralement utiliser l'application de bureau de toute façon, donc, vous savez, une fois qu'on a chargé fig MMA, on peut l'ouvrir. Donc nous sommes ici avec figure mon ouvert. J' ai un nouveau document ouvert ici est bien sur. Tu veux juste te familiariser avec ce que tu as devant toi. Donc, vous savez, nous avons juste un peu comme vos options et trucs. Ici, nous avons l'échelle mobile. Nous avons des cadres, se trouve juste vos outils souples réguliers que vous avez besoin de Teoh pour obtenir la conception. En gros. Donc, pour commencer, on va faire un cadre. Un cadre est essentiellement un espace où vous allez faire votre design, faire votre design une fois que vous avez réellement sélectionné un cadre. Donc, lorsque vous cliquez sur ce bouton ici, vous pouvez choisir différentes tailles sur la droite. C' est sur la droite, vous savez, nous pouvons choisir trouver le bureau tablette. On va y aller. J' arrête 14 40 par 10. 24. Et c'est ce que nous avons devant nous quand nous choisissons un de ces amis. Maintenant, les premières choses d'abord. Je veux faire une grille pour que je puisse fondamentalement aligner mon contenu. Alarme mon design à un grand pour le faire, nous allons simplement ici où vous voyez la grille de mise en page sur le côté droit. Appuyez dessus et on aura un nouveau démissionnaire. Cependant, nous ne voulons pas vraiment. C' est hors réseau. On veut des colonnes. Donc, ici, nous avons un tas de colonnes. Maintenant, je vais donner mes colonnes 12. Dis le numéro 12 Je dirai, va l'avoir centré, et je vais donner à chaque colonne une semaine de congé en 65 sur une gouttière avec off 30. C' est avec ça que j'aime travailler. Tu sais, tu peux choisir la note que tu veux, mais c'est ce que j'aime. C' est ce qui marche pour moi. Et cela me donne juste une zone de teneur en sel dans laquelle travailler. Et j'ai 30 pixels entre chaque colonne, ce que j'aime aussi, je devrais appuyer sur Entrée. Donc, il pixels entre chaque colonne et pourtant me donne un bon espacement pour mon contenu. Cependant, avant de commencer à ce que nous concevons aujourd'hui est une bonne idée d'avoir un cadre métallique , une sorte d'idée de ce que vous souhaitez concevoir une idée de ce que la page devrait ressembler. Donc j'ai rapidement fait un cadre métallique ici que vous pouvez voir parce que nous faisons un site web personnel très simple . Vous savez, j'ai une sorte de barre de sieste en haut avec les liens de navigation du logo. J' ai une description de titre d'image de profil. Ensuite, j'ai, comme, une section de portefeuille de services et puis un monteur où je vais avoir plus haut moi courte description boutons de contact, Donc oui, très rapidement. Rassemblez ça, j'ai généralement une bonne idée sur. Je vais commencer dans ma tête. Je ne fais pas habituellement de cadres métalliques, mais si les cadres métalliques vous aident, s'il vous plaît le faire. Avoir un cadre métallique pour simplement illustrer Nous allons concevoir avant que vous commenciez vraiment conçu. La version haute fidélité vient vraiment aider. Il peut juste trier vos pensées douces et s'assurer que vous avez quelque chose sur le papier. Alors c'est tout pour celle-là. Et le prochain le fera. En fait, ça a commencé avec un design et a pris une femme pour lui dans un design de haute fidélité. 3. Nav et héros: donc bienvenue. Maintenant que nous allons réellement commencer dans la conception, revenons à notre cadre métallique et jetons un coup d'oeil à ce que nous travaillons. Alors commençons par l'en-tête sur la section dis-off de titre de la section héros ici. Donc ce que j'ai généralement aimé, c'est moi parce que c'est évidemment dans ma protestation. Mon design, tu sais, est ce que j'aime faire. Vous n'avez pas à le suivre exactement. Mais ce que j'aime faire, c'est que j'ai un design basé sur la carte que j'aime utiliser beaucoup, donc nous allons en fait donner une couleur à l'arrière-plan. Donc, quand il s'agit de la couleur, je vais en fait utiliser l'une des couleurs par défaut que vous trouvez dans la Fig MMA. Vous savez, vous avez un système de couleurs, mais je veux juste que ça soit très simple, vraiment facile pour vous les gars. Donc, nous n'allions pas au système de couleur ou aller Teoh la section de couleur ici, choisir des couleurs personnelles sur serait juste utiliser cette couleur comme couleur de fond, puis nous allons créer un rectangle. Donc, j'appuie sur sont sur le clavier. Vous pouvez également appuyer ici, sorte que vous pouvez réellement voir les raccourcis ici pour les formes, rectangle, ligne, ligne, flèche Vous savez, tout ce dont vous avez besoin. En gros. Donc, cela créerait un rectangle s'étirant tout le long. Et ce que j'aime faire, c'est que j'aime obtenir la couleur du rectangle blanc cassé. Est-ce que Andi lui a aussi donné une ombre portée ? Alors donnons-lui une goutte très subtile. L' ombre lui donnera un coup de deux. Donnez-lui une distance Y d'un, puis donnez-lui une capacité. Eh bien, oui, je le passe, euh 5, tous les gars. Nous allons également masquer la grille de mise en page. Voir Il y a la section d'en-tête Powersoft. Ensuite, nous allons ajouter notre logo. En fait, je vais juste ajouter un texte. Lego Teoh, le secret texto gastronomique vient d'appuyer sur le bouton texte en haut et nous ne nous assurerons que cela soit dans notre grille. Donc, si on met rapidement notre comme je l'ai fait, on utilisera fig, mon site web. Rends ça facile. Juste une simple jambe de texte. Revoyons notre grille. J' espère se tromper de couche sur leur gars sur. Oui, on y va. Nous pouvons voir qu'il est maintenant aligné avec la grille, donc la plupart du contenu va être aligné dans cette grille. Cette grille de mise en page qu'ils voient. Mais je ne vois pas la grille de mise en page en règle générale. C' est seulement un gars, pas de règle, donc vous pouvez en sortir comme je l'ai fait avec l'en-tête avec l'en-tête d'arrière-plan avec un en-tête. Arrière-plan même. Et vous pourriez en sortir quand il s'agit de la lumière, des trucs pleins de fouet, des images et des choses comme ça. Mais c'est juste un bon moyen de s'assurer que, vous savez, il y a des marges, un espacement et d'autres choses. C' est pourquoi j'aime utiliser une grille de mise en page. Alors cachons à nouveau la cour inférieure, sélectionnons notre cadre, puis appuyez sur ça pour le cacher. Quand il s'agit de polices. Un de mes fonds préférés que j'aime utiliser son Inter se dans le remorquage, Je pense juste semble fantastique. C' est aussi un téléphone gratuit, et il est spécialement conçu pour la conception Web. Vous, je conçois des AP comme la conception d'interface ou ce genre de choses, et je pense que c'est tout simplement génial. Donc, nous allons changer la taille de celui-ci pour être un peu plus grand. Je dois récupérer ma grille de mise en page, en fait, donc je peux m'assurer qu'elle est dans la mise en page. On y va. Peut-être que ça lui donnera un peu de poids. Semi bateau va lui faire avoir un gars qui a l'air assez bien déjà. Quand encore ? Quand il s'agit de la couleur de celui-ci, je pense que c'est un peu trop sombre. Peut-être lui donner un peu plus d'une belle couleur. Ouais, j'aime cette couleur ici. Je pense que ce genre d'apparence se brise. En fait, ça pourrait le rendre plus sombre. Donnez un code hexadécimal d'un. La prochaine chose que nous allons faire est d'ajouter notre navigation afin que nous allons créer à nouveau un texte, et ensuite nous ajouterons la maison est l'un d'entre eux. Eh bien, euh, portefeuille comme l'autre, euh, et ensuite aussi contact. Donc je suis simplement copier et coller ces, vous savez, contrôle, contrôle, copie, copie commande. Et puis commande V contrôle V. Just Teoh. Créez plusieurs textes ou zones. Um, changerait la taille avant. Donc, je sélectionne toutes les couches. Saint quart. Et je mets les couches parce que je pense que l'avant est un peu trop léger. Va en faire 14. Ouais, 40 ans. Rien n'a l'air assez bon. Nous allons également changer la couleur de celui-ci. Teoh Un gris plus clair. Ouais, je pense que ça a l'air plutôt bien. Donc, l'un des outils utiles avec une figure conçue pour aimer est que vous pouvez effectivement aligner automatiquement tous vos éléments. Vous n'êtes jamais des éléments à avoir la même distance pour être alignés verticalement ou ce genre de choses. Nous allons donc sélectionner toutes ces couches, et nous allons utiliser cet outil ici pour aligner les centres verticaux. Maintenant, ils sont alignés. Nous allons également utiliser cet outil ici. Orteil rangé sur cela donnera à chacun de ces articles et un espacement égal de montage . L' espacement est en fait ici le nombre 54 pixels entre chacun d'eux. Mais je pense que c'est un peu trop. Allons le ramener à 30. Et maintenant, il donnera 30 pixels entre tous et nous pouvons l'aligner sur notre mise en page. Super. Et nous voilà. C' est l'en-tête de navigation. Plutôt fait. Donc, évidemment, est une bonne idée. Teoh a organisé toutes vos couches. C' est ce qu'on va faire aujourd'hui. Nous allons regrouper cette sélection. Je vais l'appeler maintenant. Bar. On y va. Et oui, je pense qu'on a fait un bon départ jusqu'à présent. air plutôt bien. Ensuite, on va faire glisser Teoh dans une image. Donc, une image de profil ou quoi que ce soit. Donc ici, j'ai acheté dans une image de moi-même. Très peu d'idée. Les médias moi-même changeront la largeur de celui-ci. Donc quelque chose comme 500 vite, juste ce week-end. Donc, jaugez la taille avec et le reste de la page plutôt que de la prendre en charge. Toute la page obtiendra la grille de mise en page à nouveau sur ce que nous allons faire est que nous allons redimensionner cela de sorte qu'il prend un nombre spécifique de colonnes. Donc je vais tenir le quart de travail que je vais mettre le coin de l'image sur et le faire glisser, Teoh, je pense que 5 40 ans ce que ça devrait être. Oui, parfait. Maintenant prend six colonnes. Je suis de ce côté. Vous aurez notre texte. Donc, alors que mon aussi fait est en fait de faire les coins autour d'elle, ce que vous pouvez faire très simplement en utilisant le tri circulaire Icahn sur n'importe quel carré, n' importe quelle image , quelle qu'elle soit, nous pouvons aussi rapidement cacher et montrer un grade en utilisant le contrôle. G. C'est le contrôle G sur Mac. je ne suis pas complète. Sûrement sur les fenêtres, mais je suis sûr que c'est très, très similaire. Alors maintenant, obtenons notre image et faisons ressortir vers les sommets que nous l'alignons. Et nous allons nous assurer que l'espacement est égal. Par exemple, je vais le faire baisser de 100 pixels. Quoi ? D' habitude, j'aime avoir une pause, et puis j'appuie sur l'Irak 10 fois. Donc 123456789 10. Donc maintenant, nous avons 100 pixels de l'espace entre l'image sur la barre de navigation. Ensuite, ajoutons du texte. Alors reprenons la grille de mise en page pour voir notre texte où le texte va aller. Donc, je pense que le texte pourrait en fait être un peu trop proche. Si je le dis, quelque chose choisit son chemin, je vais le mettre un peu plus loin. Donc je vais ajouter du texte pour faire de la boîte de texte, et ensuite je vais mettre quelque chose comme, euh, hé, en fait, regardons, tu veux ? Un designer sur la création d'Angleterre ? Faisons quelque chose comme ça. Très simple, très facile. Changeons le côté de ça parce que c'est en route. Je voulais être grand et important pour mon peuple à Big 36. Ça a l'air plutôt bien. Douce. Cachons encore la grille. Je pense que ça a déjà l'air assez bien. Ajoutons aussi du texte factice. En fait, je vais juste contrôler le copier-coller. Cela va lui donner trois pixels d'espacement par le haut. Alors je vais mettre un texte factice ici maintenant. Une prise dans laquelle je vais utiliser pour ajouter le texte factice est une alarme publique appelée. C' est, hum maintenant je vais vous montrer rapidement là brancher que j'ai installé pour fig MMA. Donc si vous allez Teoh là-bas, je peux apparaître dans aller à brancher et vous pouvez voir n'importe quelle prise dans son chiffre que l'humanité a disposition. Vous pouvez voir ceux qui ont été stockés. J' ai des icônes de conception de matériaux, icônes de plumes sur les cartes Laura dans celles des seuls plug-ins ont installé. Revenons donc à notre conception de documents sur. Utilisons l'alarme. Il est de disposer leur gars, sélectionner des calques de texte. On y va. Euh, commence encore près de la poche. Oui. Générez tous les gars. Cool. Faisons en sorte que notre impôt ne soit évidemment pas trop important parce qu'il est en quelque sorte plus important. Changeons la taille avant Teoh. Changons-le à 16. Je pense que 16 serait mieux là aussi. Tu sais, ça n'a pas l'air juste. Le texte, généralement le corps du texte n'a tout simplement pas l'air juste quand il n'est pas élégant. Alors changeons ce Teoh habituel. Et puis changeons la couleur parce que je ne le veux pas. Alors soyez aussi sombre que le titre de titre. Alors donnons-lui une nuance plus claire de gris, mais il semble encore un peu off sur la principale chose qui vit hors est la hauteur de la ligne. Donc, pour changer la ligne, je vais choisir un texte, et ensuite nous allons choisir qui on a la hauteur de la ligne. Alors, changeons ça. Donc, actuellement, la ligne haute est 19. Passons ça à quelque chose comme 22. On peut déjà voir. Ça a l'air calme. Mieux peut-être 24. Oui, tu y vas. Je pense que ça regarde tout de suite beaucoup plus facile à lire. Évidemment, c'est non en anglais, mais c'est beaucoup plus facile. Teoh lu beaucoup plus lisible semble plus propre aussi, donc nous pourrions réellement mener cela ici et conduire qu'il pourrait y avoir. Mettons quelques icônes de médias sociaux. Donc ici, je viens de traîner et de déposer quelques comptes de médias sociaux que j'ai reporté sur le Web . Très simple. Changeons la taille d'entre eux. Je vais changer ce 1 à 30 Jane que 1 à 30 aussi bien, très bien et ensuite changé pour Tricon 32. Là, allez-y. Ensuite, changeons la distance entre eux. Mais je pense que c'est un peu trop un rasé à 20. En fait. Ne pensez pas que c'est encore un peu trop. Peut-être 15. Ouais, je pense que ça a l'air un peu mieux maintenant. Allons le traîner sur moi seul. Ils ne sont pas les mêmes parce que le rembourrage entre eux, changeons la couleur parce que je pense que c'est un peu trop brillant. Disons qu'on peut le changer en quelque chose comme fait. Nous y sommes. C' est donc la section de navigation douce par héros. C' est tout pour celui-ci, et le suivant commencera avec la section des services 4. Services: Alors bienvenue maintenant que nous avons notre bar sur les héros hors section finition, faisons la section services. Mais nous voulons également nous assurer que nos articles sont effectivement pliés et groupés ensemble. Alors faisons-le vite. Appelons ça la section. En fait, juste nous pouvons supprimer la section. On n'a pas besoin de section qu'on pourrait appeler ici. Je sais qu'on s'est cool. Donc, nous voulons vraiment agrandir notre cadre afin que nous puissions sélectionner notre cadre en cliquant ici ou en cliquant ici. Et puis on l'enfonce et on l'agrandit. Nous allons nous rendre un peu plus grand que nous pouvons nous sentir hors de notre contenu. On y va. Joli. Alors maintenant, nous allons faire notre section des services. Donc, quand nous retournerons voir la femme et nous avons vu que nous avons une courte description des services. Les cercles sont destinés à être des icônes, puis le service chaque fois est sur une courte description ce service. Alors mettons dans les services de rubrique. Mettons-le au milieu et faisons-le descendre 100 pixels. 123456789 10 Avez-vous juste pour que soit une quantité égale par rapport au héros sur la barre d'écrou . Aussi, je pense que ce plaisir est peut-être un peu trop grand, aussi. Alors changeons la taille de ceci. Change ça, Teoh 24 en fait, 24 Je pense que c'est peut-être un peu trop petit. Changeons, Teoh. 30. Ouais, j'aime ça. Je pense que ça a déjà l'air mieux. La cour l'a centré. Et puis ci-dessous, il ajoutera une description des services. Donc, nous allons changer la taille avant de ceci aussi. À 16 ? Oui, le gars. Changez-le pour changer régulièrement la couleur en un briquet. Gris. Quelque chose comme ça. Tous les gars. Maintenant, je pourrais juste mettre une description rapide, quelque chose comme ça. Maintenant, nous allons mettre une icône, donc je vais utiliser un des figments plug ins. Je vais utiliser l'outil des icônes de plumes. Donc nous sommes là, avec le bouchon dans mon étang va mettre quelque chose comme pour que je ne sois pas très comme à résoudre. difficile de m'assurer que je ne peux pas correspondre au service parce que, honnêtement, je fais juste ça. C' est une démonstration par cette icône. Alors amenons ça ici, nous sommes. On l'a ici. Assurez-vous que cette icône est dans notre cadre. Ils ont un gars. Rendons-le un peu plus grand. Je pense que c'est un peu trop petit. Allons l'évoquer. Teoh, 48 et avec le moyen, je veux garder la taille le même espoir. Ouais, nous voulons restreindre les propriétés de celui-ci, dit ici les proportions limitées nuit même pas les propriétés et changer la taille de l'icône espoir fait à petit 48. Je pense toujours que cette icône est un peu trop petite sur généralement avec des icônes comme celle-ci, parce que ce n'est pas très détaillé. Tu ne devrais pas les rendre trop grands. Donc, la meilleure façon de les faire prendre un peu plus d'espace est d'ajouter un cercle ou une forme ou autre. C' est peut-être derrière. Donc, je vais ajouter un cercle derrière lui comme ces couches Muda pour qu'il soit au milieu au-dessus même et ensuite l'aligner et nous pouvons déjà dire que cela fait une énorme différence. Maintenant, obtenons ce cercle une nuance très claire, super, quelque chose comme ça. Et puis donnons-lui une couleur. Peut-être devrions-nous choisir l'une des couleurs qu'ils ont ici. En fait, ce qui a commencé à partir de ce que nous allons faire, c'est que nous allons donner l'arrière-plan du cercle. Ah, la couleur bleu clair est, eh bien, quelque chose comme ça. Je pense que ça a l'air bien. Joli, rapide ça, hum, appelle ça juste icône, quelque chose comme ça. Et puis nous ajouterons un service. Donc, nous avons juste mis quelque chose comme le Web design. Avoir un gars. Je veux lui donner 20 photos, bannir par le haut. Rends-le un peu plus grand. Peut-être en faire 24 pas 24. Trop grand. Gardez-le à 18 ans. Nous voulons également remonter notre réseau parce que nous voulons nous assurer que nous avons tout alliant correctement. Donc parce que nous avons parlé de 12 colonnes et que nous faisons trois services différents, alors dormez chaque colonne va tuer. Chaque section des services va prendre quatre colonnes. Je dis. Changeons la largeur de ceci pour qu'il prenne quatre colonnes, chaque gars et ensuite c'est au centre. L' icône à cela rendra l'icône rendra la tête du service semi-gras, puis nous donnerons à notre service une description. Alors changez la taille avant, aussi. 14. Rami est le poids et puis donnez-lui un briquet. Super. Um et puis nous pouvons d dans n'importe quelle sorte de description avec plus de 10 ans de congé quand expérience de conception , je peux concevoir un site Web avant votre entreprise. Mes compétences en matière de droits d'auteur ne sont pas les meilleures, mais hé, j'essaie de le faire le plus rapidement possible. Vraiment ? Ne passez pas trop de temps à vous assurer que c'est parfait. Donc, nous voulons nous assurer est, eh bien, que la hauteur de la ligne semble à nouveau droite, parce que maintenant le texte semble juste un peu trop compact. Donc on va monter la ligne. Je c'est une valeur par défaut de 17 fera 20. Ne jamais aller ou ce qu'il a l'air beaucoup, beaucoup mieux. C' est donc notre première section des services. Will groupe. Ça l'appellera service, et ensuite on le copiera et on le collera et on amènera le suivant au milieu comme si , euh, très bien. Assurez-vous qu'il est aligné doux. Ensuite, nous pourrions faire quelque chose comme le développement Web, et ensuite nous comparons quelque chose comme j'utilise hace email CSS Java bibliothèques de script pour faire plus que et des sites Web fonctionnels. Qu' est-ce que les années changeront cette icône si à nouveau. Nous allons brancher les icônes de plumes, et ensuite nous trouverons peut-être une icône pertinente, quelque chose qui devrait paraître cool. Euh, qu'est-ce qui pourrait avoir l'air bien ? Oh, j'aime bien celle-là. C' est parfait, en fait. Site, amenons-le. Ça semble très bon. Joli. Uh, nous allons déplacer les couches autour. Donc, notre vie précédente, presque 48 quand je m'assure que celui-ci est également 48 proportions de contrainte changent la taille à 48 comme, disons, et ensuite envoyé à elle. Eh bien, en fait, utilisez une couleur différente pour cette icône. Peut-être utilisera vert qu'elle est verte et puis nous allons aussi lui donner contrairement à l'ombre comme si cool Cu cu cu cu cu cu cu cu prochaine section de services doit faire cette belle copie et coller là-bas nous sommes envoyés à elle et puis nous allons l'appeler quelque chose comme si sûr médias. Et puis nous avons mis quelque chose comme utiliser les médias sociaux comme dans prendre votre marque pushy. Je peux vous aider à atteindre des millions de marques dans le monde entier. Je suis vraiment en train d'inventer des trucs ici. Ça a l'air ridicule, mais bon, ça marche Donc encore, nous allons ajouter une autre icône. Utilisé les icônes de plume brancher. Ensuite, nous trouverons pertinents. Tu sais ce qui va bien ? On utilise juste celui-là. Tous les gars que nous mettrons dans l'icône du monde qu'ils voient ici ou globe. Je ne peux même pas Onda. Nous prendrons cette icône du Globe. Envoyez-lui. Rappelez-vous la mise en page une contrainte proportions redimensionner 48. N' importe quel type changera la couleur de celui-ci. Bien sûr, nous allons donner à celui-ci orange, rouge, orange Donnons-lui orange et ensuite lui donner un fond très clair comme il pourrait en fait avoir à le rendre un peu plus sombre parce qu'il est un peu trop lumineux là que nous avons. Oui, je pense que ça a l'air bien. Maintenant, amenons notre section services dans mon service hors pots, apportons-les et ensuite nous leur donnerons 50 pixels. Un Teoh 345 50 Photos de rembourrage entre la section description du titre et nous sommes là . Autrement dit, notre section des services est bonne. Tous ensemble rapidement. Sanders est gentil. Donc c'est tout pour notre section services. C' est tout pour celle-là. Dans notre prochain, nous allons gérer la section du portefeuille 5. Portfolio: Je dis, Créons notre premier article de portefeuille. Donc, une chose que j'ai noté avec quoi avec mon cadre métallique est que j'ai l'élément de portefeuille, mais il n'y a pas de description de titre de ce qu'il est, donc je vais réellement le concevoir dans un tri de carte ancien comme je l'ai fait avec le Navajo. Le haut. Alors bien, d' abord une copie. Soit le texte, le titre et la description des services, et nous allons le ramener ici. Voilà, tu y vas. Assurez-vous qu'il dispose de 100 pixels. Rembourrage d'air par le haut. 123456789 10. Cool. Et alors nous verrons. Nous le nommons mettre pour le je un autre va sélectionner la description. Je me sens des pièces choisies en arrière. Cool. Qui ? Mon orthographe est correcte. Je me trompe toujours parfois juste un de ces mots où vous ne savez pas si je vais d'abord avec vous les gars. Alors faisons notre première carte. Donc, va frapper notre pour faire un rectangle plus vont montrer a eu lieu à nouveau pour nous assurer que nous sommes dans la création sur il ressemble à dans les Andes. Prenez six colonnes donc ça va faire 5 40 avec la hauteur, Hum, commençons par notre image. Donc si on fait la hauteur de 300 gars très, je pense que ça a l'air plutôt bien. Et puis nous lui donnons un fond blanc. En fait, n'avez que l'arrière-plan. Peu importe parce qu'on va mettre une image ici. Donc je vais juste tirer quelques images de mon propre portefeuille de dribbles. Tirons celui-ci, par exemple. C' est juste copier cette image sur le coller dans la guerre de Fig Maher automatiquement. Fondamentalement sentir que le rectangle avec votre image, ce qui peut être très, très utile. Donc, en gros, je masque juste qu'il est facile d'aller tout de suite. Facile pour vous tout de suite. C' est donc notre image de portefeuille, mais nous voulons ajouter une description de titre en bas. Donc, euh, je devrais ajouter un autre rectangle. Assurez-vous qu'il est aligné avec l'image d'un gars, et je vais la mettre sous l'image, lui donner un fond blanc, et encore une fois, je vais en fait lui donner une ombre. Donc, une ombre portée l'abandonne, permet à un axe Y, puis lui donne un I pass ity off 5%. On y va. J' aime bien le look au carré, mais il ne correspond pas à mon image de profil. Donc je vais retourner à mon image de profil et supprimer le rayon. Juste pour que tu corresponde mieux, je pense que ça a l'air plus net. Et je vais chercher une autre sorte. Regarde sérieux. Les coins arrondis vous donnent certainement plus d'entre nous sont ludiques. Ecoute, j'ai trouvé. Maintenant, nous allons ajouter le titre de l'article de notre portefeuille. Faisons un type de texte de zone de texte sur la couche de texte et nous l'appellerons. Comment est-ce que j'ai vraiment appelé ça ? Mon travail par téléphone. Je viens de l'appeler magazine Block Template l'appellera Venise Silver site Web. Tu sais, juste parce que j'enlève ce que je vois ici. Donc nous allons aussi Teoh, assurez-vous qu'il est bien aligné. Alors donnons-lui un peu de rembourrage, donc nous allons lui donner 30 pixels à partir de la gauche. 123 et puis ils photos du top 23. Je pense que ça pourrait faire avec plus de rembourrage sur la gauche, donc nous allons lui donner un de plus. Eh bien, 10 pixels de plus à gauche. Très bien. On va l'agrandir parce que je pense que c'est un peu trop petit. Il fera 18 ou le Texas en fait allié. Teoh être dans le centre de la ligne de texture de la ligne de la leçon de la ligne à gauche. On y va. Et puis c'est essayer de vue avant parce que tout va coller à l'endroit où il est. Donnez-lui un peu de poids et puis nous allons copier coller ce calque de texte. Je donne à une catégorie quelque chose comme le Web design, et puis on change le plaisir de ça. 12. Retirez le poids. Changer la couleur pour quelque chose comme tous les gars. Et ensuite, on va le faire tomber. 10 choix Source. Modifiez ceci afin que vous l'ayez aligné. Et on y va. Nous avons notre premier portefeuille plus blanc. Maintenant, nous allons tout mettre dans un Greep parce que nous voulons nous assurer que nos couches sont toutes bien triées. C' est cool et article de portefeuille, et puis nous pouvons copier et coller cela sur. Apportez-le et assurez-vous que c'est dans la ligne. Toe a convenu que c'est le cas, et nous avons notre article de dépôt au port. Maintenant, nous voulons changer cette image afin que nous puissions choisir l'image probablement avoir ici, ou nous pourrions simplement obtenir une autre image et copier et coller dans. Alors faisons-le que Prenons celui-ci pourrait être basé sur l'image. Oh, ce n'est pas What Copy ? Coller l'image. On y va. Maintenant, nous avons collé notre image dans Actuellement changer la façon, même recadre l'image dans le carré dans le rectangle. Je parie que je vais le laisser. Comment est ce que c'est ? On y va, et on va renommer celui-là aussi. On l'appellera quelque chose comme Pion e magazine. Nous quitterons la section Web design, puis finissons par créer des femmes quoi mettre plus 40 éléments. 123 Assurez-vous qu'il n'est pas doublé et qu'il a une quantité égale de rembourrage pour ce portefeuille. Les objets seront en fait mis dans une photo, alors mettons-la celle-ci dedans. On y va. Ensuite, nous allons mettre quelque chose comme iPad 30 un cas renommer cela en photographie Sweet et puis faisons un de plus. Donc, pour vous montrer rapidement à quel point changer l'image ici, je suis en fait en train de sélectionner ce rectangle ici. Vous pouvez le voir sélectionné sur. Ensuite, j'ai commandé copié mon image à partir de mon bureau, et je suis littéralement juste mis dans la commande V sur ou le contrôle V, et il remplace juste l'image. Très simple, chiffre très facile, il est super facile à vos images d'endroit stupides chaque fois que vous avez besoin de travaux. Mise en place de la base. J' ai un gars. Alors c'est tout. Nous avons notre résection de portefeuille fait de cette façon majeure alignée probablement à partir du haut. Alors 12345 Cool. Faisons un choix dans notre grille. Il l'est. Et nous en avons fini avec notre section portefeuille. Nous allons nous assurer que c'est aussi dans le centre loin. Ce n'était pas au centre. On y va. Donc, pour vous assurer que votre élément est dans ce centre d'état d'une page, vous pouvez simplement le sélectionner et ensuite utiliser l'un de ces outils ici, aligner, déchirer la page ou l'aligner avec un autre élément. Donc c'est tout pour l'aéroport car, en fait, on a besoin de Teoh. Ce groupe nos articles ainsi mis cinq et là. Oui, nous avons fait notre section de portefeuille. Alors c'est tout pour celle-là. Dans le prochain, nous allons concevoir l'installateur 6. Footer: Ok, donc bienvenue. Maintenant que nous avons une bonne partie de notre site Web vers le bas. La dernière chose à faire est que le pied par section. Donc, le monteur a le grand fond. Has Jaime Section armées sont titre courte description, puis dans le bouton de contact. Alors rendons notre cadre beaucoup plus grand. Donnons-lui un rectangle. Maintenant, nous avons notre monteur. Et puis nous assurons qu'il n'a pas le même espace entre les autres sections. Je viens de réaliser que l'exception de portefeuille n'a pas 100 sortes de photos. Voilà, tu y vas. C' est mieux. Donc, oui, nous allons nous assurer qu'il a 100 photos avec Phoenix Section 123456789 10. Amenez-le 100 pixels, puis donnons-lui une couleur de fond sombre. Il est encore plus sombre que ça. Il doit aller dans un endroit comme s'ils n'allaient jamais. C' est aussi copier nos en-têtes de section hexadécimal des autres sections dire que nous devons également nous assurer que c'est lisible, donc nous allons changer la couleur du texte comme disons que nous avons eu et ensuite nous allons le réduire par ce qu'il a fait. Je ne sais même pas. En fait, nous allons le faire tomber. Je pense que vous devriez le réduire de 50 pour le faire baisser de plus. Peut-être 81 2345678 Oui, je pense que ça semble mieux. Alors, changeons ça. Miami Très bien. Moi pour toi. Prochain projet là-bas. On est cool. Maintenant, nous voulons ajouter un site de bouton à nouveau. Mettez dans un rectangle comme, disons, n'a pas besoin d'être trop difficile sur la taille et quoi que ce soit d'autre pour Button . Mais mettons une couleur pour le beurre. Oui, j'aime bien cette couleur. Peut-être. , Un soir,mettons-moi en contact. Donc tout cela semble très lisible, donc nous allons le rendre blanc. Andi, faites-en un semi-gras comme, disons, c'est aussi rendre le bouton un peu plus large. Et puis le texte central dans n'importe quel type. Cool, je crois. Ouais, eh bien, garde le design carré. Je pense que le design carré a l'air assez bon. Ce que nous pourrions aussi faire, c'est même si nous avons un bouton de contact avec moi, mais pourrait aussi mettre un silence. 123 Oui, on pourrait aussi mettre quelque chose comme télécharger mon régime en dessous. Soupir. Là, nous sommes changer la taille de la police Teoh 12. Ouais, peut-être faire régulièrement. Changeons la couleur ainsi quelque chose comme ça. Ils nous sommes donc nous voilà. Nous avons le pied de fait et c'est à peu près pour ce site web personnel très basique . Espérons que ça vous donne une bonne idée de mon processus tardif de sel et à quel point il est facile de faire quelque chose que vous avez l'air, vous savez, assez simple. Minimaliste, Aussi bon en même temps. Vous savez, vous n'avez pas besoin de faire de votre portfolio des annonces super fantaisie, toutes sortes d'animations. Vous devriez surtout faire parler votre travail à coup sûr. Donc, je serais les gars appréciés ce guide de conception de site Web personnel vous donne un bon aperçu et trop, vous savez, si vous êtes intéressé à obtenir un design, c'est une bonne façon de commencer parce que je pense la meilleure façon d'apprendre qu'elle fait quelque chose Merci pour regarder ce serait les gars apprécié