Il existe un grand nombre de modèles de sites Web sur le Web, mais ils présentent un inconvénient: ils ne sont pas uniques. Si le propriétaire du site ne souhaite pas que le design de son site soit répété ailleurs, il peut commander un modèle à un designer professionnel ou essayer de le créer lui-même.
Il est nécessaire
Programme Adobe Photoshop
Instructions
Étape 1
Créer votre propre modèle n'est pas une tâche aussi difficile que cela puisse paraître à première vue. Pour travailler, vous avez besoin d'Adobe Photoshop - bien sûr, vous devez avoir au moins une compréhension de base de son utilisation. Mais avant de lancer le programme et de commencer à créer, vous devez réfléchir à l'avance à la conception future. Le moyen le plus pratique de le faire est d'abord de se familiariser avec au moins une centaine de modèles prêts à l'emploi, d'évaluer leurs avantages et leurs inconvénients. Faites attention aux solutions réussies de certains éléments de conception. Cela ne signifie pas que vous allez les copier, mais il est tout à fait raisonnable de prendre comme base des solutions belles et pratiques.
Étape 2
Sur la base de l'analyse des modèles d'autres personnes et de votre propre créativité, vous devriez vous faire une idée de l'apparence de votre site. Il est préférable de faire des croquis approximatifs du futur design avec des crayons de couleur sur des feuilles A4 ordinaires. Vous ne devriez commencer à travailler avec Photoshop qu'après avoir une idée claire de ce que vous allez dessiner exactement.
Étape 3
Démarrez Photoshop, créez un nouveau projet 1200x1600, définissez un fond transparent. Activez l'outil Règle, s'il n'est pas déjà activé, pour ce faire, appuyez sur la combinaison de touches Ctrl + R. Activer l'accrochage: Affichage - Accrochage.
Étape 4
Nous devons maintenant diviser le modèle avec des guides qui afficheront les bordures de ses éléments - côtés, colonnes, etc. Par exemple, vous souhaitez diviser le modèle de sorte qu'il y ait une colonne étroite à gauche, une colonne large à droite à droite du modèle et qu'il y ait de la place en haut pour un en-tête. Cela signifie que vous avez besoin de trois lignes verticales (la bordure gauche du modèle, la droite et la ligne entre elles) et une horizontale, montrant la bordure inférieure de l'en-tête. Pour définir une ligne verticale, déplacez le curseur vers la règle de gauche sur le côté gauche, appuyez sur V et, tout en maintenant la touche enfoncée, faites glisser la ligne jusqu'à l'emplacement souhaité. Faites de même avec les deux autres lignes verticales. Les horizontales sont construites de la même manière, seule la règle supérieure est utilisée.
Étape 5
Trouvez un arrière-plan pour votre modèle, il doit s'agir d'un petit motif répétitif. Ouvrez-le dans Photoshop, sélectionnez, copiez. Collez ensuite dans le modèle autant de fois que nécessaire pour le remplir avec l'arrière-plan. Le collage se fait comme ceci: "Modifier" - "Coller", puis faites glisser la zone d'arrière-plan à l'emplacement souhaité. Il est encore plus rapide d'insérer une image à l'aide de la commande Ctrl + V. Ajoutez un arrière-plan pour l'en-tête du site de la même manière. Vous pouvez utiliser divers remplissages dégradés pour créer un arrière-plan.
Étape 6
À l'aide de l'outil Crayon, dessinez les bordures du modèle en vous concentrant sur les lignes déjà dessinées (c'est-à-dire au-dessus d'elles). Vous avez reçu la base du modèle le plus simple, vous devez maintenant le compléter avec les détails nécessaires - boutons de navigation, lignes de menu, divers éléments de décoration, etc. Pour plus d'informations sur la création de boutons et d'autres éléments, lisez les articles correspondants sur l'utilisation d'Adobe Photoshop.
Étape 7
Le modèle est créé, vous devez maintenant le découper en morceaux pour les insérer dans la page html. Utilisez l'outil Tranche pour couper. Pour le trouver, cliquez avec le bouton droit sur l'outil Cadre et choisissez Découpe dans le menu qui s'ouvre. Vous pouvez maintenant imbriquer le modèle comme vous le souhaitez, puis enregistrer: "Fichier" - "Enregistrer pour le Web". Dans la fenêtre qui s'ouvre, sélectionnez le type de fichier: HTML & images, précisez le nom du fichier: index.htm et enregistrez-le. Vous aurez un fichier index.htm et un dossier images avec des images découpées.
