Maison interface Web Tutoriel PS 教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

Jun 01, 2016 pm 02:26 PM
按钮 Texture 金属

本文教大家打造出一个漂亮的金属质感的按钮效果

制作按钮之前需要把构造分析透彻;然后由底层开始用形状工具画出想要的图形,稍微复杂一点的可以用通过多个形状合并或减去得到;然后用图层样式给图形添加颜色和质感等即可。 最终效果

教你如何用PS制作出金属质感旋转按钮图片

一、新建一个1000*1000,72分辨率的新画布。


二、新建一层,填充34%的灰色。

教你如何用PS制作出金属质感旋转按钮图片

三、在当前这个层上右键选择“转换为智能对象”,你也可以在“图层”菜单里选择这个命令。

教你如何用PS制作出金属质感旋转按钮图片

四、添加杂色。

教你如何用PS制作出金属质感旋转按钮图片

五、再高斯模糊一点。

教你如何用PS制作出金属质感旋转按钮图片

六、现在看上去跟原图的背景差不多了。这里我插一句,之所以我把这个背景层转成智能对象后再添加滤镜的好处是,万一你觉得哪里不合适的话可以很方便的修改,比如你认为杂色不够的话可以直接双击图层下面的杂色栏修改数值,不需要重新来过。

教你如何用PS制作出金属质感旋转按钮图片

七、布置两条居中的参考线,以参考线的交叉点为中心画一个直径为723像素的椭圆形状。

教你如何用PS制作出金属质感旋转按钮图片

八、在圆形的下面用“合并形状”模式添加一个小圆形。

教你如何用PS制作出金属质感旋转按钮图片

九、把填充透明度调至0,双击这个层进入图层样式,添加纯黑白的渐变。有同学做出来不是这个效果,可以试试取消勾选反向。

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

十、重新画一个直径为468像素的圆形。

教你如何用PS制作出金属质感旋转按钮图片

十一、从“椭圆1”层里选中小的圆形路径,直接CTRL+C复制小圆形。

教你如何用PS制作出金属质感旋转按钮图片

十二、粘贴到“椭圆2”,把路径操作模式改为“减去”。 有同学反映复制过去后交叉部分是黑色的,这是因为在步骤上出了一点问题,粘贴小圆形之前先要激活路径,就是按A点击大圆形。

教你如何用PS制作出金属质感旋转按钮图片

十三、同样把填充透明度调为0,在图层样式里添加黑白渐变。为了这个渐变能更好的模仿原图,你可以左键移动渐变的黑白分布。

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

十四、继续把“椭圆3”复制一层,在图层上右键清除图层样式,Ctrl+T把直径改为173像素。

教你如何用PS制作出金属质感旋转按钮图片

十五、填充透明度调为0,添加渐变,灰色选择42%。

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

十六、画一个直径400像素的圆形,你也可以把“椭圆2”复制一层编辑一下,但是为了能直接明了地让大家看清楚,我重新画了一个。

教你如何用PS制作出金属质感旋转按钮图片

十七、填充透明度调为0 ,添加黑白渐变。

教你如何用PS制作出金属质感旋转按钮图片

十八、接着制作中间带有细齿的旋钮,画一个矩形,旋转45度,压扁。

教你如何用PS制作出金属质感旋转按钮图片

十九、Ctrl+Alt+T,旋转2度后狂Shift+Ctrl+Alt+T完成循环,一个齿轮出生了。

教你如何用PS制作出金属质感旋转按钮图片

二十、添加渐变。

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

二十一、再画一个圆形,在属性里羽化两个像素,让边缘虚一点,同时把填充透明度调为0。

教你如何用PS制作出金属质感旋转按钮图片

二十二、添加一个大家喜闻乐见的模拟金属的角度渐变,相比以前这个渐变有点复杂。

教你如何用PS制作出金属质感旋转按钮图片

二十三、还有模拟旋钮高度的斜面浮雕,其实你用投影效果也差不多。

教你如何用PS制作出金属质感旋转按钮图片

二十四、接着是比较繁琐的刻度的制作,画一个稍小于外圆的圆形,复制一个路径后减去,一个圆环出来了,为了能更好的目测它的大小,我暂时减低它的透明度。

教你如何用PS制作出金属质感旋转按钮图片

二十五、用钢笔裁去不需要的部分,为了使两边能更对称,我添加了一个参考线。

教你如何用PS制作出金属质感旋转按钮图片

二十六、复制一层,隐藏备用。进入图层样式添加斜面浮雕。

教你如何用PS制作出金属质感旋转按钮图片

二十七、点开隐藏的备用层,用“减去”模式添加一条居中的两个像素宽直条。

教你如何用PS制作出金属质感旋转按钮图片

二十八、Ctrl+Alt+T,旋转3度。

教你如何用PS制作出金属质感旋转按钮图片

二十九、之后是我最喜欢的一步,狂按Shift+Strl+Alt+T。

教你如何用PS制作出金属质感旋转按钮图片

三十、在图层样式里把颜色更改为比较深的灰色后添加斜面浮雕。

教你如何用PS制作出金属质感旋转按钮图片

教你如何用PS制作出金属质感旋转按钮图片

三十一、编辑路径,把不完整的个体去掉,底下那层凹槽也要做相应的修改。

教你如何用PS制作出金属质感旋转按钮图片

三十二、把椭圆8复制一层,右键清除图层样式,名称改为椭圆9。

教你如何用PS制作出金属质感旋转按钮图片

三十三、在图层样式里把颜色更改为比较靓丽的浅蓝色后,添加一个奇怪的斜面浮雕,因为它没有暗面。

教你如何用PS制作出金属质感旋转按钮图片

三十四、再次编辑路径,裁去一部分,科幻感十足的刻度完成了。

教你如何用PS制作出金属质感旋转按钮图片

三十五、用前面同样的办法制作一个小按钮上的指示灯,过程不再重复了。

教你如何用PS制作出金属质感旋转按钮图片

三十六、加了内阴影和白色投影的文字,非常简单。

教你如何用PS制作出金属质感旋转按钮图片

最终效果:

教你如何用PS制作出金属质感旋转按钮图片

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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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 réparer l'écran blanc de Microsoft Teams Comment réparer l'écran blanc de Microsoft Teams Apr 17, 2023 pm 05:07 PM

Redémarrez Microsoft Teams Si vous obtenez un écran vide après le lancement de Teams, un bon point de départ est de redémarrer l'application elle-même. Pour fermer et redémarrer Microsoft Teams : Cliquez avec le bouton droit sur l'icône Teams dans la zone de notification de la barre des tâches et cliquez sur Quitter dans le menu. Redémarrez Microsoft Teams à partir du menu Démarrer ou du raccourci sur le bureau et voyez si cela fonctionne. Fermez Microsoft Teams à partir du Gestionnaire des tâches. Si un redémarrage de base du processus Teams ne fonctionne pas, accédez au Gestionnaire des tâches et terminez la tâche. Pour fermer Teams depuis le Gestionnaire des tâches, procédez comme suit

5 façons de désactiver le service d'optimisation de la livraison sous Windows 5 façons de désactiver le service d'optimisation de la livraison sous Windows May 17, 2023 am 09:31 AM

Il existe de nombreuses raisons pour lesquelles vous souhaiterez peut-être désactiver le service d'optimisation de la livraison sur votre ordinateur Windows. Cependant, nos lecteurs se plaignent de ne pas connaître les bonnes étapes à suivre. Ce guide explique comment désactiver le service d'optimisation de la livraison en quelques étapes. Pour en savoir plus sur les services, vous pouvez consulter notre guide Comment ouvrir services.msc pour plus d'informations. Que fait le service d’optimisation de la livraison ? Delivery Optimization Service est un téléchargeur HTTP avec une solution d'hébergement cloud. Il permet aux appareils Windows de télécharger des mises à jour, des mises à niveau, des applications et d'autres fichiers de packages volumineux à partir de sources alternatives. De plus, cela permet de réduire la consommation de bande passante en permettant à plusieurs appareils d'un déploiement de télécharger ces packages. De plus, Windo

Qu'est-ce que le bouton de sécurité Windows ? Tout ce que vous devez savoir Qu'est-ce que le bouton de sécurité Windows ? Tout ce que vous devez savoir Apr 13, 2023 pm 10:22 PM

Qu'est-ce que le bouton de sécurité Windows ? Comme son nom l'indique, le bouton de sécurité Windows est une fonctionnalité de sécurité qui vous permet d'accéder en toute sécurité au menu de connexion et de vous connecter à votre appareil à l'aide d'un mot de passe. Dans ce cas, les smartphones sont définitivement en avance. Mais les appareils portables Windows, tels que les tablettes, ont commencé à ajouter un bouton de sécurité Windows qui constitue plus qu'un simple moyen d'empêcher les utilisateurs indésirables d'entrer. Il fournit également des options de menu de connexion supplémentaires. Cependant, si vous essayez de trouver le bouton de sécurité Windows sur votre ordinateur de bureau ou ordinateur portable, vous pourriez être déçu. pourquoi donc? Tablettes vs PC Le bouton de sécurité Windows est un bouton physique qui existe sur les tablettes

Comment redémarrer, forcer le redémarrage et éteindre l'iPad Mini 6 Comment redémarrer, forcer le redémarrage et éteindre l'iPad Mini 6 Apr 29, 2023 pm 12:19 PM

Comment forcer le redémarrage de l'iPad Mini 6 Forcer le redémarrage de l'iPad Mini 6 se fait avec une série de pressions sur des boutons, et cela fonctionne comme ceci : Appuyez et relâchez pour augmenter le volume Appuyez et relâchez pour diminuer le volume Appuyez et relâchez le bouton d'alimentation/verrouillage jusqu'à ce que vous voyiez Logo Apple, indiquant que l'iPad Mini a été redémarré de force. Ça y est, vous avez redémarré de force l'iPad Mini 6 ! Un redémarrage forcé est généralement utilisé pour des raisons de dépannage, par exemple lorsque votre iPad Mini se bloque, que les applications se bloquent ou qu'un autre problème général se produit. Une chose à noter concernant la procédure de redémarrage forcé de l'iPad Mini de 6e génération est que pour tous les autres appareils dotés de cadres ultra-fins et utilisant

Après réécriture :

Comment réparer le contrôleur PS5 non reconnu sous Windows 11 Après réécriture : Comment réparer le contrôleur PS5 non reconnu sous Windows 11 May 09, 2023 pm 10:16 PM

<h3>Que dois-je savoir sur la connexion de ma manette PS5 ? </h3><p>Aussi bon que soit le contrôleur DualSense, il a été signalé que le contrôleur ne se connectait pas ou n'était pas détecté. Le moyen le plus simple de résoudre ce problème consiste à connecter le contrôleur à votre PC à l'aide d'un câble USB approprié. </p><p>Certains jeux prennent en charge DualSense de manière native. Dans ces cas-là, vous pouvez simplement brancher le contrôleur. Mais cela soulève d'autres questions, comme que se passe-t-il si vous n'avez pas de câble USB ou si vous ne souhaitez pas en utiliser un ?

Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons Sep 21, 2023 pm 02:03 PM

Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons. Avec la popularité croissante des applications Web, nous devons souvent utiliser certains effets dynamiques pour améliorer l'expérience utilisateur lorsque les utilisateurs interagissent avec la page. Parmi eux, l'effet compte à rebours du bouton est un effet très courant et pratique. Cet article expliquera comment utiliser le framework Vue pour implémenter des effets de compte à rebours des boutons et donnera des exemples de code spécifiques. Tout d’abord, nous devons créer un composant Vue contenant un bouton et une fonction de compte à rebours. Dans Vue, un composant est une instance Vue réutilisable et une vue sera

Comment effacer l'historique de téléchargement du navigateur Microsoft Edge ? Comment effacer l'historique de téléchargement du navigateur Microsoft Edge ? Apr 21, 2023 am 09:34 AM

<ul><li><strong>Cliquez pour accéder :</strong>Navigation du plug-in de l'outil ChatGPT</li></ul><h2>Rechercher et supprimer l'historique des téléchargements dans Edge< /h2> ;<p>Comme les autres navigateurs, Edge dispose d'un<strong>Téléchargement

Modifier l'action du bouton d'alimentation sous Windows 11 [5 conseils] Modifier l'action du bouton d'alimentation sous Windows 11 [5 conseils] Sep 29, 2023 pm 11:29 PM

Le bouton d'alimentation peut faire plus que simplement éteindre votre PC, bien qu'il s'agisse de l'action par défaut pour les utilisateurs d'ordinateurs de bureau. Si vous souhaitez modifier l’action du bouton d’alimentation dans Windows 11, c’est plus simple que vous ne le pensez ! Gardez à l'esprit que le bouton d'alimentation physique est différent du bouton du menu Démarrer et que les modifications ci-dessous n'affecteront pas le fonctionnement de ce dernier. De plus, vous trouverez des options d'alimentation légèrement différentes selon qu'il s'agit d'un ordinateur de bureau ou d'un ordinateur portable. Pourquoi devriez-vous modifier l’action du bouton d’alimentation dans Windows 11 ? Si vous mettez votre ordinateur en veille plus souvent que vous ne l'éteignez, modifier le comportement de votre bouton d'alimentation matériel (c'est-à-dire le bouton d'alimentation physique de votre PC) fera l'affaire. La même idée s'applique au mode veille ou simplement à la désactivation de l'écran. Changer Windows 11

See all articles