Photoshop CSS网页页面制做的情况图 主题的引入款式

2021-01-20 14:29 jianzhan

先看来图:

怎样完成这样的实际效果呢?

最先,要提前准备1张这样的照片:

怎样做出这样的照片呢?

1、开启Photoshop,新建1个640×480像素的文本文档

2、新建涂层,按D键将市场前景色和情况色修复为前黑后白,再按X键互换市场前景色和情况色。挑选圆角矩形框专用工具(便捷键U),半径设定为10个像素,画1个宽400像素,高50像素的圆角矩形框。在图上你不容易看到任何转变,由于此时的圆角矩形框和情况全是白色的,可是在涂层面板中的涂层1中,你会观查到,实际上圆角矩形框早已画好了。

3、将涂层1拷贝1遍(Ctrl+J)

4、挑选涂层1,在编写菜单选中择描边指令,挑选#CBD99C色调,出外部给圆角矩形框描上1个像素宽的边。

結果以下图:

4、挑选橡皮专用工具,调剂画笔尺寸,将总流量设定为100%,擦去矩形框边框的右侧和下边。

 

5、挑选涂层1副本,在涂层面板中的缩略图上双击鼠标,弹出涂层款式会话框,勾选渐变色叠加,将渐变色色调设定为#FAFAFA到#FFFFFF,勾选反色,点一下明确。

6、合拼涂层1副本和涂层1(Ctrl+E),再度挑选橡皮擦专用工具,将总流量调剂为10%,应用较大的画笔,在合拼后的涂层上涂抹,做出渐隐实际效果。

7、挑选文本专用工具,键出引号,调剂引号尺寸和字体样式,我这里应用了42个像素尺寸的幼圆字体样式,将引号色调变更为#E7E7E7,调剂引号部位。

好了,照片的制做就进行了。下面应用CSS中的设定情况照片特性将此照片运用到<blockquote>元素,调剂在其中的内边距便可以了。编码以下:

blockquote { color: #777;
                   background: White url(img/quote.gif) no-repeat top left;
                   padding-top: 10px; 
                   padding-left: 35px; }