Maison interface Web Tutoriel PS photoshop 创建清新、色彩生动的网页布局

photoshop 创建清新、色彩生动的网页布局

Jun 01, 2016 pm 02:36 PM
清新 mise en page de pages Web

以下是创建过程中所需的图片:
绿叶 

photoshop 创建清新、色彩生动的网页布局
像素化的蓝色矩形
photoshop 创建清新、色彩生动的网页布局
第一步:新建文档 1200px * 750px,选择渐变工具(G),对背景图层从上(#792700)到下(#000000)新建渐变,如下图所示:
photoshop 创建清新、色彩生动的网页布局
第二步:添加色彩 新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为“颜色”。如下图所示:
photoshop 创建清新、色彩生动的网页布局
第三步:添加纹理打开一开始保存好的“绿叶”图片,使用移动工具(V),移动到当前文档内,右击新图层,选择“转换为智能对象”,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的“混合模式”为“差值”,透明度为30%,图层命名为:“纹理”。如下图所示:
photoshop 创建清新、色彩生动的网页布局
photoshop 创建清新、色彩生动的网页布局
第四步:为内容添加黑色背景新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出“图层样式”对话框,如下图一样设置“阴影”,最后设置此图层的透明度为70%,图层命名为:“黑色形态”,如下图所示:
photoshop 创建清新、色彩生动的网页布局
第五步:添加组管理图层按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl+g),组命名为:背景,如下图所示。
photoshop 创建清新、色彩生动的网页布局
第六步:创建更多组 新建组(图层>新建>图层编组),组命名为:主页,在“主页”内再增加一个组,组命名为“logo”,如图所示:
photoshop 创建清新、色彩生动的网页布局
第七步:创建logo和网站副标题在“logo”的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,“斜面与浮雕”,“外发光”,“渐变叠加”。然后再新建图层编辑网站副标题,颜色为#eeeeee。
photoshop 创建清新、色彩生动的网页布局
photoshop 创建清新、色彩生动的网页布局
第八步:创建”注册“,”登录“按钮现在将在布局的右上角创建两个按钮。
新建组,命名为“注册|登录”;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。
设置前景颜色为白色,用字体工具(T)在按钮上编写“注册|登录”,设置字体层的透明度为75%。
photoshop 创建清新、色彩生动的网页布局
photoshop 创建清新、色彩生动的网页布局
第九步:创建1px高的蓝色水平线新建组,命名为“导航”,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为“横线”。
photoshop 创建清新、色彩生动的网页布局
第十步:给导航添加渐变选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区,右击图层,转换为“智能对象”,然后再转到菜单 滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为“渐变”,且在渐变与横线之间留出1px的距离。
photoshop 创建清新、色彩生动的网页布局


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment centrer les images dans la conception Web Dreamweaver Comment centrer les images dans la conception Web Dreamweaver Apr 08, 2024 pm 08:45 PM

Centrer une image dans Dreamweaver : sélectionnez l’image que vous souhaitez centrer. Dans le panneau Propriétés, définissez l'alignement horizontal sur Centre. (Facultatif) Définissez l’alignement vertical sur Centre ou Bas.

La définition et l'utilisation des caractères pleine chasse La définition et l'utilisation des caractères pleine chasse Mar 25, 2024 pm 03:33 PM

Que sont les caractères pleine chasse ? Dans les systèmes de codage informatique, les caractères double largeur sont une méthode de codage de caractères qui occupe deux positions de caractères standard. De manière correspondante, la méthode de codage de caractères qui occupe une position de caractère standard est appelée caractère demi-chasse. Les caractères pleine chasse sont généralement utilisés pour la saisie, l'affichage et l'impression de caractères chinois, japonais, coréens et autres caractères asiatiques. Dans les méthodes de saisie et d'édition de texte chinoises, les scénarios d'utilisation des caractères pleine chasse et des caractères demi-chasse sont différents. Utilisation de caractères pleine chasse Méthode de saisie chinoise : Dans la méthode de saisie chinoise, les caractères pleine chasse sont généralement utilisés pour saisir des caractères chinois, tels que des caractères chinois, des symboles, etc.

Conseils jQuery pour obtenir rapidement la hauteur de l'écran Conseils jQuery pour obtenir rapidement la hauteur de l'écran Feb 24, 2024 pm 06:30 PM

Conseils jQuery : Comment obtenir rapidement la hauteur de l'écran Dans le développement Web, vous rencontrez souvent des situations où vous devez obtenir la hauteur de l'écran, comme la mise en œuvre d'une mise en page réactive, le calcul dynamique de la taille des éléments, etc. En utilisant jQuery, vous pouvez facilement réaliser la fonction d'obtention de la hauteur de l'écran. Ensuite, nous présenterons quelques méthodes d'implémentation de l'utilisation de jQuery pour obtenir rapidement la hauteur de l'écran et joindrons des exemples de code spécifiques. Méthode 1 : utilisez la méthode height() de jQuery pour obtenir la hauteur de l'écran en utilisant la hauteur de jQuery.

Quelles sont les propriétés de mise en page Flex couramment utilisées ? Quelles sont les propriétés de mise en page Flex couramment utilisées ? Feb 25, 2024 am 10:42 AM

Quelles sont les propriétés communes de la mise en page flexible ? Des exemples de code spécifiques sont requis. La mise en page flexible est un outil puissant pour concevoir des mises en page Web réactives. Il facilite le contrôle de la disposition et de la taille des éléments dans une page Web à l'aide d'un ensemble flexible de propriétés. Dans cet article, je présenterai les propriétés communes de la mise en page Flex et fournirai des exemples de code spécifiques. display : Définissez le mode d’affichage de l’élément sur Flex. .container{display:flex;}flex-direct

En quoi consiste le bootstrap ? En quoi consiste le bootstrap ? Apr 05, 2024 am 01:09 AM

Le framework Bootstrap se compose des composants suivants : Préprocesseurs CSS : SASS et LESS Responsive Layout System : Système de grille et composants de classe d'utilitaires réactifs : éléments d'interface utilisateur et plug-in JavaScript Thèmes et modèles : styles prédéfinis et pages prédéfinies Outils et utilitaires : Jeu d'icônes, jQuery, Grunt

Comment utiliser l'unité CSS Viewport vh pour créer une mise en page Web qui s'adapte aux écrans mobiles Comment utiliser l'unité CSS Viewport vh pour créer une mise en page Web qui s'adapte aux écrans mobiles Sep 13, 2023 am 11:15 AM

Comment utiliser l'unité CSSViewport vh pour créer une mise en page Web qui s'adapte aux écrans de téléphones mobiles. La popularité et l'utilisation des appareils de téléphonie mobile sont de plus en plus répandues, et de plus en plus de pages Web doivent être adaptées aux écrans de téléphones mobiles. Pour résoudre ce problème, CSS3 a introduit une nouvelle unité : l'unité Viewport, qui inclut vh (viewportheight). Dans cet article, nous explorerons comment utiliser les unités vh pour créer des mises en page Web adaptées aux écrans mobiles et fournirons des exemples de code spécifiques. un

Explication détaillée de l'utilisation de la balise HTML iframe Explication détaillée de l'utilisation de la balise HTML iframe Feb 21, 2024 am 09:21 AM

Explication détaillée de l'utilisation de la balise iframe en HTML La balise iframe en HTML est une méthode utilisée pour intégrer du contenu tel que d'autres pages Web ou des images dans une page Web. En utilisant la balise iframe, nous pouvons afficher le contenu d'une autre page Web sur une seule page Web, obtenant ainsi flexibilité et diversité dans la mise en page des pages Web. Dans cet article, l'utilisation de la balise iframe sera présentée en détail et des exemples de code spécifiques seront fournis. 1. La structure syntaxique de base de la balise iframe En HTML, l'utilisation de la balise iframe nécessite le langage de base suivant

Existe-t-il un moyen d'effacer les flotteurs ? Existe-t-il un moyen d'effacer les flotteurs ? Feb 22, 2024 pm 04:00 PM

Existe-t-il une méthode pour effacer les flottants ? Des exemples de code spécifiques sont requis. Dans la mise en page Web, les flottants sont une méthode de mise en page courante qui permet aux éléments de se détacher du flux de documents et d'être positionnés par rapport aux autres éléments. Cependant, un problème souvent rencontré lors de l'utilisation d'une mise en page flottante est que l'élément parent ne peut pas envelopper correctement l'élément flottant, ce qui entraîne une mise en page désordonnée de la page. Par conséquent, nous devons prendre des mesures pour effacer le flotteur afin que l'élément parent puisse envelopper correctement l'élément flottant. Il existe de nombreuses façons d'effacer les flottants. Ce qui suit présente plusieurs méthodes couramment utilisées et donne des exemples de code spécifiques.

See all articles