Rumah hujung hadapan web Tutorial PS Photoshop设计制作夜蓝转圈进度条教程

Photoshop设计制作夜蓝转圈进度条教程

Jun 01, 2016 pm 02:32 PM
biru bar kemajuan

本PS教程将简单介绍如何用Photoshop打造进度条。本PS教程属于初级教程,适合初学者学习。 最终效果图

Photoshop设计制作夜蓝转圈进度条教程

  教程图0
  1、选择“文件/新建”菜单,打开“新建”,宽度:为685像素,高度:为443像素,“分辨率”为72 , “模式”为RGB颜色的文档,如图1所示。

Photoshop设计制作夜蓝转圈进度条教程

  图1
  2、创建新图层按钮,新建一个图层,接着在工作区填充,设置前景为灰色,设置RGB值分别为:55/56/58,接着按键盘快捷键Alt+Delete填充,并按键盘Ctrl+D取消,如图2所示。

Photoshop设计制作夜蓝转圈进度条教程

  图2
  3、执行菜单:“滤镜”/“渲染”/“杂色”/“添加杂色”,设置数量1%,分布勾选平均分布,勾选单色,如图3所示。效果如图4。

Photoshop设计制作夜蓝转圈进度条教程

  图3

Photoshop设计制作夜蓝转圈进度条教程

  图4
  4、在图层控制面板击新建图层按钮,新建图层1,在工具箱中选择椭圆工具 ,在工作区中拖出一个椭圆选区,设置前景色为黑色,并按快捷键Alt+Delete填充图层1,然后Ctrl+D取消选择状态,并调整成圆,如图5所示。

Photoshop设计制作夜蓝转圈进度条教程

  图5
  5、双单击图层1进入到图层样式,分别勾选投影、内阴影选项。如图6所示。

Photoshop设计制作夜蓝转圈进度条教程

  图6
  6、勾选投影,设置阴影混合模式:柔光,点击色标处,阴影颜色设置为白色,不透明度:15%,角度:90,距离:1像素,扩展:0%,大小:0像素,然后点击确定按钮,如图7所示。

Photoshop设计制作夜蓝转圈进度条教程

  图7
  7、勾选内阴影,设置阴影混合模式:正片叠底,点击色标处,阴影颜色设置为黑色,不透明度:25%,角度:90,距离:1像素,扩展:0%,大小:5像素,然后点击确定按钮,如图8所示。

Photoshop设计制作夜蓝转圈进度条教程

  图8
  8、在图层控制面板中,选择图层1,复制1一个图层1副本,改名为图层2,并双单击图层2进入到图层样式,分别勾选内阴影、外发光、斜面和浮雕、渐变叠加选项。如图9所示。

Photoshop设计制作夜蓝转圈进度条教程

  图9
  9、勾选内阴影,设置阴影混合模式:柔光,点击色标处,阴影颜色设置为白色,不透明度:30%,角度:90,距离:1像素,扩展:0%,大小:0像素,然后点击确定按钮,如图9所示。

Photoshop设计制作夜蓝转圈进度条教程

  图10
  10、勾选外发光选项,设置投影混合模式:正常,不透明度:30%,点击点按可编辑渐变,设置前景到透明,颜色为蓝色到白色,方法为柔和,扩展为0%,大小为:5像素,范围为50%,如图11所示。

Photoshop设计制作夜蓝转圈进度条教程

  图11
  11、勾选斜面和浮雕复选项,样式:内斜面,方法:平滑,深度:100%,方向:上,大小:10像素,软化:0像素,阴影:角度:90,高度:20度,高光模式为:滤色,颜色为:白色,不透明度为:17%,阴影模式为:正片叠加,颜色为:黑色,不透明度为:0%,其他设置值参考图12,如图12所示。

Photoshop设计制作夜蓝转圈进度条教程

  图12
  12、勾选渐变叠加选项,弹出渐变叠加对话框,混合模式:叠加,不透明度:22%,渐变颜色为黑色到白色,样式:线性,勾选与图层对齐,角度为90度,缩放为150%,如图13所示。

Photoshop设计制作夜蓝转圈进度条教程

  图13
  13、在工具箱中选择横排文字工具 ,在画面中用鼠标单击后,在光标后输入“75%”,在工具选项栏中设置字体为“Tahoma”,设置字体大小为“18点”,设置消除锯齿为“犀利”,设置字体颜色为白色,如图14所示。经过调整后的效果图,如图15。

Photoshop设计制作夜蓝转圈进度条教程

  图14

Photoshop设计制作夜蓝转圈进度条教程

  图15

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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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 untuk menetapkan warna bar kemajuan menggunakan HTML dan CSS? Bagaimana untuk menetapkan warna bar kemajuan menggunakan HTML dan CSS? Sep 19, 2023 pm 08:25 PM

Dalam pembangunan laman web, bar kemajuan adalah bahagian penting laman web. Bar kemajuan menunjukkan kemajuan proses. Dengan bantuannya, pengguna boleh melihat status kerja yang dilakukan di tapak web, termasuk masa muat, muat naik fail, muat turun fail dan tugas lain yang serupa. Secara lalai, ia berwarna kelabu. Walau bagaimanapun, untuk menjadikan bar kemajuan menonjol dan menarik secara visual, anda boleh menggunakan HTML dan CSS untuk menukar warnanya. Apakah bar kemajuan? Bar kemajuan digunakan untuk menunjukkan kemajuan tugas. Ia adalah elemen antara muka pengguna grafik. Ia pada asasnya terdiri daripada bar mendatar yang diisi secara beransur-ansur semasa tugas berjalan, disertai dengan nilai peratusan atau penunjuk penyiapan lain. Bar kemajuan digunakan dalam aplikasi web untuk memberikan pengguna maklumat tentang melengkapkan proses seperti muat naik fail, muat turun fail atau pemasangan perisian.

Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript? Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript? Oct 27, 2023 am 08:57 AM

Bagaimanakah JavaScript melaksanakan fungsi bar kemajuan memuatkan halaman? Dalam aplikasi Internet moden, kelajuan memuatkan halaman adalah salah satu faktor utama pengalaman pengguna. Untuk menunjukkan kepada pengguna proses pemuatan, banyak tapak web dan aplikasi menggunakan bar kemajuan pemuatan. JavaScript menyediakan cara yang mudah dan berkesan untuk melaksanakan fungsi bar kemajuan memuatkan halaman. Proses pelaksanaan khusus adalah seperti berikut: Buat struktur HTML Mula-mula, buat struktur HTML bar kemajuan di lokasi yang sesuai pada halaman adalah perkara biasa untuk meletakkan bar kemajuan

Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan Sep 19, 2023 am 09:22 AM

Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan Bar kemajuan ialah elemen antara muka biasa yang boleh digunakan untuk memaparkan penyelesaian tugas atau operasi. Dalam rangka kerja Vue, kita boleh melaksanakan kesan khas bar kemajuan melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan bar kemajuan dan memberikan contoh kod khusus. Cipta komponen Vue Pertama, kita perlu mencipta komponen Vue untuk melaksanakan fungsi bar kemajuan. Dalam Vue, komponen boleh diguna semula dan boleh digunakan di beberapa tempat. Buat fail bernama Pro

Cara menggunakan CSS untuk mencipta langkah pelaksanaan bar kemajuan memuatkan halaman web Cara menggunakan CSS untuk mencipta langkah pelaksanaan bar kemajuan memuatkan halaman web Oct 26, 2023 am 11:00 AM

Langkah-langkah pelaksanaan cara menggunakan CSS untuk mencipta bar kemajuan memuatkan halaman web Dalam reka bentuk web moden, kelajuan memuatkan adalah penting untuk pengalaman pengguna. Untuk meningkatkan pengalaman pengguna, anda boleh menggunakan CSS untuk mencipta bar kemajuan pemuatan halaman web supaya pengguna dapat memahami dengan jelas kemajuan pemuatan halaman web. Artikel ini akan memperkenalkan langkah pelaksanaan menggunakan CSS untuk mencipta bar kemajuan memuatkan halaman web dan memberikan contoh kod khusus. Langkah 1: Struktur HTML Mula-mula, anda perlu menambah elemen div yang mewakili bar kemajuan dalam HTML, seperti yang ditunjukkan di bawah: <divclass=&q

Bagaimana untuk membuat kesan pendarfluor biru dalam PS Bagaimana untuk membuat kesan pendarfluor biru dalam PS Feb 27, 2024 pm 12:55 PM

Editor laman web ini membawakan anda tutorial ini untuk membawa anda ke dunia Photoshop yang indah dan belajar cara mencipta kesan pendarfluor biru yang menawan. Sama ada anda baru menggunakan Photoshop atau pengguna berpengalaman, anda boleh mendapatkan inspirasi dan petua praktikal daripada tutorial ini. Jadi bagaimana untuk mencipta kesan pendarfluor biru dalam PS Panduan tutorial ini akan memberi anda pengenalan terperinci, saya harap ia dapat membantu anda. Kesan pendarfluor biru PS kaedah pengeluaran langkah kesan akhir: 1. Laraskan kecerahan gambar. 2. Tambah lengkung untuk melaraskan kontras terang dan gelap keseluruhan gambar. 3. Gunakan pen untuk mengaitkan "jalur tepi" kasut. 4. Selepas memotong, buat pilihan dan isi dengan warna putih. 5. Pilih alat kabur dan kaburkan bahagian putih yang dicangkuk. 5. Gunakan pen untuk menandakan tali kasut

Cara membuat bar kemajuan menggunakan HTML dan CSS Cara membuat bar kemajuan menggunakan HTML dan CSS Sep 05, 2023 am 09:09 AM

Gambaran Keseluruhan Bar kemajuan ialah komponen utama mana-mana aplikasi web. Kemajuan menunjukkan penyiapan projek atau tugas. Dalam modul ini, kami akan membina bar kemajuan menggunakan HTML dan menggayakannya dengan CSS. Kami juga akan menyediakan animasi kemajuan untuk bar kemajuan. Dalam tugasan ini, kami akan menghidupkan bar kemajuan menggunakan @keyframes. Gunakan sifat gaya animasi seperti tempoh animasi, nama, masa, dsb. Algoritma Langkah 1 - Buat boilerplate HTML dalam editor teks. Langkah 2 - Buat bekas div induk dan takrifkan nama kelas sebagai barContainer. Langkah 3 - Sekarang buat anak lain daripada div induk semasa dan tentukan nama kelas. Langkah 4 - Cipta kanak-kanak yang mewarisi dalam proses dan akan dianimasikan

Pembangunan komponen Vue: kaedah pelaksanaan komponen bar kemajuan Pembangunan komponen Vue: kaedah pelaksanaan komponen bar kemajuan Nov 24, 2023 am 08:56 AM

Pembangunan komponen Vue: Kaedah pelaksanaan komponen bar kemajuan Prakata: Dalam pembangunan Web, bar kemajuan ialah komponen UI biasa, yang sering digunakan untuk memaparkan kemajuan operasi dalam senario seperti permintaan data, muat naik fail dan penyerahan borang. Dalam Vue.js, kami boleh melaksanakan komponen bar kemajuan dengan mudah dengan menyesuaikan komponen Artikel ini akan memperkenalkan kaedah pelaksanaan dan menyediakan contoh kod khusus. Saya harap ia akan membantu pemula Vue.js. Struktur dan gaya komponen Pertama, kita perlu mentakrifkan struktur asas dan gaya komponen bar kemajuan.

Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi Jul 21, 2023 pm 08:54 PM

Cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi Vue.js ialah rangka kerja bahagian hadapan yang ringan dan Element-UI ialah perpustakaan komponen UI berdasarkan Vue.js, yang menyediakan set komponen yang kaya. dan interaksi. Kesannya boleh membantu kami membangunkan antara muka hadapan yang cantik dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan bar kemajuan dan memuatkan kesan animasi. 1. Pasang dan perkenalkan Element-UI dahulu,

See all articles