网页设计图文教程 第1篇
首屏的高度加上导航设为1286，所有的内容都需要在这个1286的高度以内。在设计前，Pixso设计师先简单分析了一下首屏的设计：要保证好的视觉效果，图片素材需要采用高清的图片，图片人物的眼睛关注的焦点尽量保证统一的视角，图片的色彩要与网页的主色紫色和谐，将图片的大小进行变化体现整体画面的活力与节奏，图片的圆角大小保持一致呈现画面的秩序感。标题文字与内容文字大小与色彩的变化，有效体现画面的层次感。
以下为元素的各项参数：
（1）圆角矩形背景元素，大小1376x768、圆角大小99、倾斜角度45度、填充色#FFEAA7。圆点图案元素，圆点大小13。
（2）标题文字【combine fine images】，字体名称为“Inter”、字体大小96、字体颜色黑#2D3436与红#D63031、字间距104、字重为特粗。
（3）副标题文字【 to represent a product】，字体名称为“Inter”、字体大小64、字体颜色黑#2D3436、字间距自动、字重为特粗。
（4）文字fine的标注圆角参数，颜色#55EFC4，大小191x51.
（5）图片描述文字参数，字体名称为“Inter”、字体大小18、字体颜色#2D3436、字间距32、字重为常规，图片与文字的上下间距16，左右间距30。
（6）图片尺寸大小270x464、470x380、270x284、370x356、170x222、，图片圆角都为20，图片间距都为30。
（7）按钮【learn more】圆角矩形大小为270x82，圆角为999。字体名称为“Inter”、字体大小32、字体颜色#FFFFFF、字间距48、字重为粗体。按钮与图片的上间距与右间距为30。
网页设计图文教程 第2篇
设计网页的特色功能模块，根据内容设计模块高度为666。如下图所示，从文字内容来看，Pixso设计师认为这里的设计需要快速有效的向用户这个网站的核心的功能，从而促进购买。因此，设计师采用图标与文字结合的方式，让用户能够快速的获取关键信息。文字统一采用左对齐符合用户从左到右的阅读习惯。强对比的色彩，让用户快速区分不同的功能特点。
以下为各元素参数：
（1）模块标题文字【delivering good designs since 1954】参数，字体名称为“Inter”、字体大小32、字体颜色黑#2D3436、字间距48、字重为粗体。
（2）标题说明文字，字体名称为“Inter”、字体大小24、字体颜色黑#2D3436、字间距36、字重为常规。
（3）文字【support】【sales growth】【coponents-driven】【swap the icon】，字体名称为“Inter”、字体大小24、字体颜色黑#2D3436、字间距36、字重为粗体。
（4）功能图标尺寸都为70x70，图标配色都为黄#FFEAA7，图标背景配色从左到右分别为红#E84393、蓝#0984E3、紫#6C5CE7、绿#00B894。
（5）各功能对应的说明文字参数，字体名称为“Inter”、字体大小18、字体颜色黑#2D3436、字间距32、字重为常规。
（6）按钮【learn more】尺寸为146x48，圆角大小为16，字体名称为“Inter”、字体大小18、字体颜色黑#2D3436、字间距32、字重为粗体。
网页设计图文教程 第3篇
使用矩形工具或者快捷键【R】，绘制网页导航尺寸为1440x96，在右侧属性面板填充色参数为#FFFFFF，100%填充。在效果模块添加外阴影，参数如下图所示。然后继续使用矩形工具绘制Grid图标，图标色值设为#6C5CE7。使用文字工具快捷键【T】输入文字，文字参数如下:
（1）设置文字【Grid】参数，字体名称为“Inter”、字体大小48、字体颜色#2D3436、字间距56、字重为粗体。
（2）设置文字【How it works】参数，字体名称为“Inter”、字体大小18、字体颜色#2D3436、字间距32、字重为粗体。
（3）设置文字【who we are】【what we do】【contact us】参数，字体名称为“Inter”、字体大小18、字体颜色#6C5CE7、字间距32、字重为常规。
使用圆形工具快捷键【O】绘制小圆点，填充颜色为#FDCB6E，直径为6。
最后，绘制登录按钮圆角矩形尺寸为170x64，圆角大小9999，填充色#6C5CE7，设置文字【sign in】字体名称为“Inter”、字体大小24、字体颜色#FFFFFF、字间距36、字重为粗体。
网页设计图文教程 第4篇
在素材不完美的情况下，如何通过逆光效果，来突出氛围？逆光效果具有哪些特征？场景又该怎样塑造？
这些，我们都会在课程中一一为大家解答。
以上就是我们上篇部分的全部内容，课程通过理论结合实践的方式进行讲解，相信学完之后，大家会对网页设计有更深刻的认识，也能做出更加优秀的作品。更多详细内容，让我们一起期待正式课程的学习。
网页设计图文教程 第5篇
价格模块高度设为882。这个部分的设计，要考虑商业诉求，引导用户付费。所以在设计时对重点用户的需求，做了价格卡片进行突出。在设计表现上，通过阴影与颜色进行区分，让用户一目了然。
以下为各元素参数信息：
（1）标题文字【affordable pricing】参数，字体名称为“Inter”、字体大小64、字体颜色黑#2D3436、字间距自动、字重为特粗。
（2）副标题【bill me monthly yearly】参数，字体名称为“Inter”、字体大小32、字体颜色灰#ADADAD与紫#6C5CE7、字间距48、字重为粗体。
（3）副标题monthly下突出圆角矩形参数，大小为126x12，圆角大小为999。
（4）文字【like a pussy】【individual】【corporate】参数，字体名称为“Inter”、字体大小18、字体颜色#6C5CE7、字间距32、字重为粗体。
（5）价格文字参数，字体名称为“Inter”、字体大小48、字体颜色#2D3436、字间距56、字重为粗体。
（6）条款说明文字，字体名称为“Inter”、字体大小18、字体颜色#2D3436、字间距32、字重为常规。
（7）条款说明图标，尺寸为32x32，背景色依次为灰#C2C2C2、黄#FDCB6E、绿#55EFC4。
（8）按钮【try for free】【extended license】，尺寸为306x64，圆角大小为16，描边#ADADAD，大小为1。按钮字体名称为“Inter”、字体大小18、字体颜色#6C5CE7、字间距32、字重为粗体。
（9）按钮【regular license】，尺寸为306x64，圆角大小为16，填充色为#6C5CE7。按钮字体名称为“Inter”、字体大小24、字体颜色#FFFFFF、字间距36、字重为粗体。
（10）按钮【best！】，大小为90x32，圆角为99，描边为1，描边色值#6C5CE7。文字字体名称为“Inter”、字体大小12、字体颜色#2D3436、字间距自动、字重为粗体。
网页设计图文教程 第6篇
内容包括：设计构图的方式有哪些？形式感如何打造？以及构图形式的适用范围等。
第五章 网页中的文字处理
文字部分在网页设计中占有举足轻重的地位，它是网页信息传达的主要载体。
我们通过分析文字的排版、图文混排的方式，以及标题文字排版三个方面来讲解。