Rumah hujung hadapan web Tutorial PS Photoshop 绘制冬季气息风格网站首页

Photoshop 绘制冬季气息风格网站首页

Mar 20, 2017 pm 03:25 PM

这款网站博客界面配色比较单一,标志,背景与导航全部使用淡蓝色。设计与制作都很适合新手练习用,界面排版主要靠方块形状。整体风格凸显冬天的气息. 先看下效果吧 :)
Photoshop 绘制冬季气息风格网站首页
第1步:新建文件(ctrl+N),全选(ctrl+A)填充#e3f2f6色;取消选择(ctrl+D)
Photoshop 绘制冬季气息风格网站首页

第2步:设置参考线;编辑>首选项>常规>网格(ctrl+K)

Photoshop 绘制冬季气息风格网站首页

第3步:激活网格(ctrl+'),按F8打开窗口>信息,选择圆角矩形工具(U)设置半径为10px,圆角矩形宽度为960px;隐藏网格(ctrl+')

Photoshop 绘制冬季气息风格网站首页

第4步:选择标尺(ctrl+R)

Photoshop 绘制冬季气息风格网站首页

第5步:找张喜欢的风景;使用移动工具(V)移动到适合的位置,并转换为智能对象(右键单击图层,选择转换为智能对象)。进入编辑>自由变换(ctrl+T),然后选择滤镜>锐化;设置这层的混合模式为“叠加”不透明度为80%
添加图层蒙版,选择渐变工具(G)从黑到白

Photoshop 绘制冬季气息风格网站首页

第6步:新建组(ctrl+G),然后新建图层;选择图像>应用图像,点击确认;使用矩形选区工具(M)创建380px x 90px大小选区,反选(ctrl+shift+I);删除;然后取消选区(ctrl+D)

Photoshop 绘制冬季气息风格网站首页

第7步:转换为智能对象(右键单击图层,选择转换为智能对象),载入选区(ctrl+左键点击图层);添加图层蒙版;选择滤镜>模糊>高斯模糊,然后选择滤镜>杂色>添加杂色;选择滤镜>锐化>锐化

Photoshop 绘制冬季气息风格网站首页

第8步:选择图层>新建调整图层>亮度/对比度,(打勾创建剪切蒙版选项)

Photoshop 绘制冬季气息风格网站首页

第9步:创建同上大小矩形工具(U),颜色为#9dd8ed,双击图层选择图层样式>斜面和浮雕,图层混合模式为>正片叠底,不透明度为25%

Photoshop 绘制冬季气息风格网站首页

第10步:在第6步图层下方新建层,在层使用矩形工具创建同上相同大小的矩形,然后设置图层样式,如图:

Photoshop 绘制冬季气息风格网站首页

第11步:选择文本工具(T)文字颜色为#f2feff;双击打开图层样式对话框做一下设置

Photoshop 绘制冬季气息风格网站首页

第12步:新建图层,载入白色圆角矩形选区,并隐藏该层,选择矩形选区工具(M)做一下设置,然后显示圆角矩形层;

Photoshop 绘制冬季气息风格网站首页

第13步:锁定透明区域;然后选择滤镜>模糊>高斯模糊;选择滤镜>杂色>添加杂色;选择滤镜>锐化>锐化

Photoshop 绘制冬季气息风格网站首页

第14步:添加图层样式

Photoshop 绘制冬季气息风格网站首页

第15步:选择图层>新建调整图层>亮度/对比度,(打勾创建剪切蒙版)

Photoshop 绘制冬季气息风格网站首页

第16步:设置前景色为#b1e3f3,选择矩形工具(U)创建剪切蒙版,混合模式为>正片叠底,不透明度为25%

Photoshop 绘制冬季气息风格网站首页

第17步:添加文字,颜色为#f2feff

Photoshop 绘制冬季气息风格网站首页

第18步:选择圆角矩形(U)半径为6px;颜色为#f0f7f9;输入文字:斜体、#a1c6D0。

Photoshop 绘制冬季气息风格网站首页

第19步:使用矩形 工具,大小问哦600 x 250像素,颜色为#ebf3f5;左边距为30像素,上边距为20像素;设置图层样式:

Photoshop 绘制冬季气息风格网站首页

第20步:添加一张图片,移动到合适位置创建剪切蒙版

Photoshop 绘制冬季气息风格网站首页

第21步:使用自定义形状工具(U)创建一个白色箭头,设置图层样式

Photoshop 绘制冬季气息风格网站首页

第22步:重复箭头(ctrl+J),选择编辑>变换>水平翻转,设置图层样式

Photoshop 绘制冬季气息风格网站首页

第23步:创建5个矩形,大小为100 x 100像素;对齐

Photoshop 绘制冬季气息风格网站首页

第24步:使用钢笔工具(P)创建一个方块上方的小三角形使用颜色#d2d2d2

Photoshop 绘制冬季气息风格网站首页

第25步:新建图层,创建600 x 1像素的水平线,亚瑟为##eeeeee

Photoshop 绘制冬季气息风格网站首页

第26步:使用矩形工具(U)大小为280 x 120像素,添加一些文字

Photoshop 绘制冬季气息风格网站首页

第27步:复制5个

Photoshop 绘制冬季气息风格网站首页

第28步:选择矩形工具(U)建立一个颜色#eeeeee垂直分割线

Photoshop 绘制冬季气息风格网站首页

第29步:选择矩形工具(U)建立一个300px宽矩形,颜色#f5f9fa。

Photoshop 绘制冬季气息风格网站首页

第30步:选择行工具(U)创建一个工具栏垂直线使用颜色#d1e2e6 。 复制这一层(Ctrl + J)移动到补工具栏的右侧。

Photoshop 绘制冬季气息风格网站首页

第31步:使用矩形工具(u)创建四个125 x 125px大小的矩形

Photoshop 绘制冬季气息风格网站首页

第32步:添加文字和矩形

Photoshop 绘制冬季气息风格网站首页

小鱼已经完成Ps制作冬天主题的网页教程,您呢(*^__^*) 嘻嘻……
原文:Photoshop制作冬天主题的网页教程

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana saya menggunakan Photoshop untuk mencipta grafik media sosial? Bagaimana saya menggunakan Photoshop untuk mencipta grafik media sosial? Mar 18, 2025 pm 01:41 PM

Butiran artikel menggunakan Photoshop untuk grafik media sosial, meliputi persediaan, alat reka bentuk, dan teknik pengoptimuman. Ia menekankan kecekapan dan kualiti dalam penciptaan grafik.

Bagaimanakah saya menyediakan imej untuk kegunaan web di Photoshop (saiz fail, resolusi, ruang warna)? Bagaimanakah saya menyediakan imej untuk kegunaan web di Photoshop (saiz fail, resolusi, ruang warna)? Mar 13, 2025 pm 07:28 PM

Artikel membincangkan penyediaan imej untuk kegunaan web di Photoshop, memberi tumpuan kepada mengoptimumkan saiz fail, resolusi, dan ruang warna. Isu utama adalah mengimbangi kualiti imej dengan masa pemuatan cepat.

Bagaimanakah saya menggunakan alat pemindahan kandungan dan kandungan yang menyedari kandungan Photoshop dengan berkesan? Bagaimanakah saya menggunakan alat pemindahan kandungan dan kandungan yang menyedari kandungan Photoshop dengan berkesan? Mar 13, 2025 pm 07:35 PM

Artikel membincangkan menggunakan alat pengisian kandungan dan memindahkan kandungan Photoshop dengan berkesan, menawarkan petua untuk memilih kawasan sumber, mengelakkan kesilapan, dan menyesuaikan tetapan untuk hasil yang optimum.

Bagaimanakah saya menyediakan imej untuk web menggunakan Photoshop (mengoptimumkan saiz fail, resolusi)? Bagaimanakah saya menyediakan imej untuk web menggunakan Photoshop (mengoptimumkan saiz fail, resolusi)? Mar 18, 2025 pm 01:35 PM

Artikel membincangkan mengoptimumkan imej untuk web menggunakan Photoshop, memberi tumpuan kepada saiz fail dan resolusi. Isu utama adalah mengimbangi kualiti dan masa beban.

Bagaimana saya menggunakan keupayaan penyuntingan video Photoshop? Bagaimana saya menggunakan keupayaan penyuntingan video Photoshop? Mar 18, 2025 pm 01:37 PM

Artikel ini menerangkan cara menggunakan Photoshop untuk penyuntingan video, memperincikan langkah -langkah untuk mengimport, mengedit, dan mengeksport video, dan menonjolkan ciri -ciri utama seperti panel garis masa, lapisan video, dan kesan.

Bagaimana saya menentukur monitor saya untuk warna yang tepat di Photoshop? Bagaimana saya menentukur monitor saya untuk warna yang tepat di Photoshop? Mar 13, 2025 pm 07:31 PM

Artikel membincangkan pemantauan menentukur untuk warna yang tepat dalam Photoshop, alat untuk penentukuran, kesan penentukuran yang tidak wajar, dan kekerapan semula. Isu utama adalah memastikan ketepatan warna.

Bagaimanakah saya menyediakan imej untuk cetak menggunakan Photoshop (resolusi, profil warna)? Bagaimanakah saya menyediakan imej untuk cetak menggunakan Photoshop (resolusi, profil warna)? Mar 18, 2025 pm 01:36 PM

Artikel ini membimbing untuk menyediakan imej untuk dicetak di Photoshop, memberi tumpuan kepada resolusi, profil warna, dan ketajaman. Ia berpendapat bahawa profil 300 ppi dan CMYK adalah penting untuk cetakan yang berkualiti.

Bagaimana saya membuat gif animasi di photoshop? Bagaimana saya membuat gif animasi di photoshop? Mar 18, 2025 pm 01:38 PM

Artikel membincangkan membuat dan mengoptimumkan GIF animasi di Photoshop, termasuk menambah bingkai kepada GIF yang sedia ada. Fokus utama adalah untuk mengimbangi kualiti dan saiz fail.

See all articles