好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

Step 23: Post brief and Meta

步骤23:发布的简介和元信息

Draw a talking bubble again, over the picture and the yellow stripe, fill it with this Color: #333333 with a 1px Stroke (Color: #696969) and also apply the Drop shadow we did before on the banner. Then add the a sample brief text using "Komika Text Tight" Size: 14pt, Color: #FFFFFF, a sample Meta text using "Tahoma" 10pt Color #979797 and if you want to a line between both texts (#4B4B4B).

再次画一个谈话框,在图片和黄色矩形的上方,给它填充颜色: #333333,1px的描边(颜色: #696969)并添加我们之前给横幅添加的投影样式。然后添加一个示例简介文本,字体:Komika Text Tight,字号:14px,颜色: #FFFFFF;一个示例信息文本,字体:Tahoma,字号:10px,颜色: #979797,和你想在它们之间添加的分割线(颜色: #4B4B4B)

Step 24: Finishing the main content

步骤24:完成主内容区

To finish this part add a Comments bubble, basically repeating the process of Step 18. Then put everything on folders, I’m naming the post folder "A post". Then, duplicate it (Command / Ctrl + Drag) and place it on the right. Repeat the process with two or three rows of post as shown at the bottom of the image below. Increase the height of the white background as needed to fit all the post in.

为完成这个部分,要添加一个回复的谈话框,基本上是重复步骤18的步骤 (可以把步骤18的谈话框复制,并适当的调整大小,回复数字的字号:18px,COMMENTS字号:10px) 。然后把他们合并到文件夹,我给文件夹命名为A Post。然后复制(Ctrl + Drag)并摆放到右侧。按照下图重复这个过程使列表两到三行。调整白色背景的高度使之能包含所有的发布。

Step 25: Page Content Corner

步骤25:内容区的边角

To increase the "comic book" style, we will add a simple page curl at the bottom right of the white background.

为了增加Comic book风格,我们要在白色背景的右下角添加一个页面卷曲的效果

First draw a Black Triangle at the bottom right corner (you can use the Pen Tool), then duplicate it and move the triangle making it a "reflex" of the black one, you can fill this copy with any other color. Next warp the second triangle making it a little curve. Then, apply to the warped triangle a Gradient Overlay using a nice mix of colors: (#9C0001 – #FE0000 – #9C0001) and change the Angle to anything that looks good according the angle of the curl, in this case 108 degrees. Next using a Soft Brush (Black, Opacity and Flow 50%) paint some shadows in a new layer behind the warped triangle. If you want to, add some points to the warped triangle in order to add a rounded corner to the tip just as shows the bottom of the image below. Finally, put all the curl related layers into a folder named "Page Curl". Keep it handy because we are using it later.

首先在右下角画一个黑色三角形(可以用 钢笔工具 )( 建议用 矩形工具 创建一个矩形(1098,951,52,45),然后用 直接选择工具 选择左上角的点,删除即可得到三角形 ),然后复制它并移动三角形使之成为黑色的“反射”,你可以给这个复制的三角形填充任意颜色。接下来弯曲第二个三角形,使其变成一点点曲线状。然后,用漂亮的混合颜色给弯曲三角形一个渐变叠加( #9C0001 - #FE0000 - #9C0001),根据弯曲的角度调整渐变的角度使其看起来更舒服,在这里是108度。接下来用一个软刷(黑色,不透明度和流量为50%)在新的图层里给弯曲的三角形添加一个阴影。如果你想,添加一些点在弯曲的三角形上使其添加一个圆角,就像下图所示。最后,把所有的弯角的图层合并到Page Curl文件夹。把它放在显眼的位置,因为我们后面还要用到它。

Step 26: Footer Background

步骤26:页脚背景

We are almost done, first create a folder named "Footer" and ensure is below the "Page Content" folder, inside it draw a red (#9C0001) circle, then apply a Gaussian Blur of at least 65px radius. Then transform the resultant blurred circle to make it match with the bounding guides.

我们完成的差不多了,首先确保在Page Content文件夹下面新建文件夹Footer,在里面画一个红色( #9C0001)的圆 (560,850,300,300) ,然后添加一个半径至少65px的高斯模糊。然后变换产生的模糊光圈 (240,787,910,420) ,使其适合边界的参考线。

Step 27: Background sunbursts

步骤27:背景日辉纹

Now, with the Custom Shape Tool, select one of the Sunburst shapes and draw a black one in the middle, then down its Opacity to 50%. Then add the Halftone Pattern over the red glowing circle, hide it using a layer mask and show only some parts of it. Finally down the opacity of the red circle to 50%..

现在,用 自定义形状工具 ,选择一个日辉纹,在中间画一个黑色的日辉纹,然后将不透明度降低到50%。然后添加半色调在红色圆光晕的上方,用图层蒙板隐藏它,仅仅显示其中的一小部分。最后将红色圆的不透明度改为50%( 建议70%比较好 )。

Step 28: Footer content background

步骤28:页脚内容背景

We will add common elements of a blog such Categories and Archive on the footer.

我们要在页脚添加一个博客普通的分类和归档的元素

Now, let’s add a background for the footer elements, draw a Rounded Rectangle (5px radius) Color:#1A1A1A and set its Fill value to 50%, making it around 3 columns wide. you can create copies of it to make fit 4 boxes at the footer.

现在,让我们给页脚元素添加一个背景,画一个圆角矩形 (240,1050,220,250) (半径:5px),颜色: #1A1A1A,然后把填充设置为50%,使其有3列宽。你可以创建它的副本使其正好4个适应整个页脚

Step 29: Footer content background – Curl

步骤29:页脚内容背景——弯角

Select the first rectangle, (you can delete the others at this point). Then duplicate the "Page Curl" folder and place it inside the "Footer" folder, transform it to make it match with the bottom right corner of the rectangle, then change the colors of the gradient to different tones of gray. Finally add to the rectangle layer a Stroke style (1px, Inside, #242424).

选择第一个矩形,(你可以删除其他的矩形)。然后复制Page Curl文件夹并把它放进Footer文件夹,变换它使其适合矩形的右下角( 建议缩放70% ),然后更改渐变叠加的颜色为不同的石头灰色 (分别是: #232323, #97918a, #252525) 。最后给矩形添加一个描边(1px,内部, #242424)

Step 30: Categories

步骤30:分类

Now, add the title of the section, in this case "Categories" using "Komika

查看更多关于PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局的详细内容...

  阅读:41次