网页设计-第四天-个人(个性)网站设计

news/2024/5/20 7:48:51/文章来源:https://blog.csdn.net/smartboy_01/article/details/102787815

个性网站设计

  • head 60px (50~70)
  • banner 550px(500~600)
  • 色彩可以比企业站随意、鲜活,不用遵循3,6,9的原则
  • footer 50px 小于head

logo

可以设计的个性化一点,使用多边形,类似QQ登录时,多边形背景

  1. 使用钢笔勾勒一个多边形,再用钢笔勾勒两个多边形打造类似折纸效果
  2. 打造高光与阴影,使用钢笔勾勒图形与主多边形相交,然后以主多边形为主做剪切蒙板,获取相交部分,设置颜色使之具有明暗对比
    个性Logo
  3. 注意图中指向的明暗变化

导航

  • 字体 18px 雅黑 锐利
    导航
  • 红色方块的宽度为一个导航按钮的宽度,两个导航按钮间的空白为两个按钮共用,而按钮又再导航按钮中居中,所以空白区域为一个按钮气概占用的两端区域

Banner

Banner

  • 制作黑色背景时可以向其中添加一些色相,这样过渡显的柔和并且也具有区分度
  • 为了显示光效,可以使用白色到透明的渐变进行叠加,或者直接使用背景增加明度使用到透明的渐变直接改变背景亮度
  • 背景偏红,拳头偏黄,使用红色与黄色之间的橙色再加一层过滤,若橙色过于偏黄,可以使用色相/饱和度(ctrl+u)调整色相,使其偏红,增加过滤效果

文字

  • 画矩形色块,选取周围背景色相加深,正片叠底,文字居上(突出文字)
  • 添加词云,白色,叠加,修改不透明度设置层次效果

内容

标题

  • 通过放大英文(Impact字体),突出中文(加粗,锐利,雅黑)
  • 标题下方,中英文文案作装饰,英文可以比中文更小更浅
  • 中文使用自定义图案进行装饰
    1. 创建5*5的文档,转换背景图层为普通图层,ctrl+左键选中图层,删除背景色,制作透明图层
    2. 使用矩形选框,制作1px的正方形,填充黑色
    3. ctrl+左键选中正方形选区,alt复制(复制到一个图层中),不选中选区直接alt复制会出现多个图层
    4. 编辑定义图案
    5. 使用矩形选框选择选区,编辑-填充(shift+f5),减弱不透明度
    6. 添加蒙板,使用矩形选框选中超出文字部分,填充黑色,凸显文字
      自定义图案使用

代表形状

  • 图形颜色可以通过图层样式中的颜色叠加削减
    1. 选用灰色,叠加即可使颜色偏灰

版块布局

  • 屏与屏之间颜色要有对比,可以一屏深一屏浅
  • 版块元素太少不够充满版面时可以通过相似的素材来填充(百度-3D小人)
    形状与版块

作品展示

  • 作品图片对下方形状作剪切蒙板,控制显示大小
  • 作品简介:标题加粗显示使用标准色,内容展示一些,多余使用[ 详细 ]标明
  • 选中状态时添加描边效果,未选中色彩调暗
    设置图层色相
    1. 选中图层,调出色相/饱和度,使其明度,饱和度都降低

图像-调整-色相(ctrl+u)/色阶(ctrl+l)等针对的是整个图像,调整的是原始图层不利于以后修改
右下角-创建新的填充或调整图层,是新建了一个调整图层,不会破坏原始图层,调整不满意可以随时删除

  1. 作剪切蒙板应用到指定图层
    作品展示

快速设置中英文字体

  • 全选文字设置使用的中文字体
  • 再设置使用的英文字体
  • 这样中、英文就都使用了各自的字体
    原因:英文字体对中文无效,反过来设置不行

快速设置多个图片为黑白色调

  • 快速拖动多个图片到当前PS图层中,选中多个图片,拖动到PS,多次单击回车键,会自动把图片转换为智能对象,但是此操作不规范,大小不准确,不建议使用。当对大小要求不高并图片过多时可以采用
  • 使用创建新的填充或调整图层,修改饱和度为最低,所有图片都转为灰色调
  • 使用矩形选框选择要设为灰色的选区,反选选区,再蒙板中填充黑色,设置其他部分的色彩

剪切蒙板注意事项

  • 下层形状要有填充或描边并且图层样式不能具有颜色、渐变、图案叠加

快速取出镂空形状镂空部分

镂空部分的三角形
镂空

  • 法一:镂空形状是两个形状做运算得到的,所以删除最外层形状就可以得到内层镂空部分
  1. 用小白选中外层形状上的锚点删除
  • 法二: 再用一个比镂空形状大的形状与原始形状做排除重叠形状运算,运算后删除边上形状即可得到镂空形状

图片不满足尺寸处理

矩形选框选中边缘部分,ctrl+t自由变化,扩大,这样只扩大了边缘部分,对整体影响不大

浏览器快捷键

  • 整个页面存储为一张图片ctrl+m

活动网站

主体色调可以设置为青蓝色调,偏女性网站字体可以使用倩体,线体

Logo

  • 英文Logo可以使用Palatino Linotype字体,字体间距设置可以相对小点
  • Logo可以与Banner做在一起
  • Logo太过规整,可以通过破形,通过钢笔画一个与笔画相似的形状
    Logo

导航

  • 选中状态使用反白设计
  • 外层再加一个圆角矩形突显
    导航

Banner

Banner中快速显示白色背景的人物形象

  • Banner中添加人物形象,并使用正片叠底,滤除图片中的白色(滤白留黑)
    正片叠底后的图片效果
  • 图片图层下加一个图层,使用画笔在图层中涂抹白色,涂抹部分就会显示正常(原因:正片叠底去除了白色,再次添加去除的白色就会还原原始色彩)
    涂抹白色的图片
  • 类似剪切蒙板的效果

添加水波背景

  • 选择具有水波效果的图片
  • 若图片较小,可以先复制一个图片,再使用剪裁工具调整背景图层的大小
  • 移动复制图层(自由变化,水平垂直翻转),对齐所要截取的部分(水波效果较强),合并图层
  • 使用矩形工具截取所需要的部分,ctrl+左键移动选中区域到指定画布
    截取的水波部分
  • ctrl+u 当前图层的色相饱和度,调整饱和度为-100,去掉图片颜色,保持灰白色调
  • ctrl+m 曲线,使亮的部分更亮,暗的部分更暗
    曲线设置
  • 图层样式设为滤色,过滤掉黑色,留下白色波纹位置
    波纹效果
  • 光斑效果可以通过画笔工具自己添加,然后通过橡皮擦削弱强度

左右导航箭头的制作

  • 使用两个正方形形状进行运算得到,旋转到所需角度,为了打造其渐变的效果,可以通过橡皮擦擦除部分尾部
    导航效果

广告语(文案)

  • 广告语在不破坏阅读习惯的前提下可以通过大小变化,高低排列进行个性化设计
    文案

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_767002.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站易用性

1. 给logo添加替代文本 这样有两个好处&#xff1a;屏幕阅读器能识别logo图片代表的含义&#xff0c;图片未加载到时&#xff0c;也能告诉非视障用户那里是你的logo。 几种方法&#xff1a; <img src"logo.png" alt"前端界"> 或者&#xff0c;你用背…

【消息队列】转-大型网站架构之分布式消息队列

大型网站架构之分布式消息队列 以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。 本次分享大纲 消息队列概述消息队列应用场景消息中间件示例JMS消息服务常用消…

实现网站国际化

插件&#xff1a;i18n项目管理工具&#xff1a;grunt需安装&#xff1a; grunt 和properties-reader&#xff08;i18n运行依赖&#xff09;在根目录下新建i18n文件夹&#xff0c;然后把i18n-parsers.coffee和i18n.coffee放在该文件夹(两文件在笔记最后)在js下面放**.json&#…

可视化网站教程:最流行的搭建工具及必学的7个功能

摘 要 记得刚进大学的时候&#xff0c;一位教授说大学里有十件必学的事情&#xff0c;其中有一件是&#xff1a;学会做网站。无论你是学什么的&#xff0c;像数据可视化&#xff0c;演示简历、作品或产品&#xff0c;都需要前端的知识。虽然目前有各种前端语言&#xff0c;像V…

网站变更服务器要重新备案吗,网站更换服务器要重新备案吗

网站更换服务器要重新备案吗 内容精选换一换Joomla是一套全球知名的内容管理系统&#xff0c;即Joomla CMS(Content Management System)。Joomla是使用PHP语言加上Mysql数据开发的软件系统&#xff0c;是网站的一个基础管理平台&#xff0c;适合从个人网站到各种企业网站、分类…

电脑配置太低?使用这几个网站,你的电脑软件要少装一半!

你还在为你的电脑配置太低导致软件过多而卡顿感到烦恼&#xff1f;还是电脑游戏太多&#xff0c;无法运行一些其他软件而不开心&#xff1f;其实不用难过&#xff0c;小编教你们使用一些在线网站&#xff0c;可以轻松的将你的电脑上的软件少安装一半&#xff01;你们准备好了吗…

statuml怎么添加用户_网站推广好怎么样的?来看看以下指引

网站推广好怎么样的&#xff1f;很多人刚开始接触推广&#xff0c;心里会有这么一个疑问&#xff0c;怎么做才可以&#xff1f;不会做怎么办&#xff1f;网站推广并不是单单做了一个网站&#xff0c;最理想化往往跟现实差别很大&#xff0c;找对方法不迷路&#xff0c;我这边给…

php网站栏目隐藏,zblogphp代码:首页不显示指定分类ID栏目的文章(可隐藏多个分类)...

有的时候&#xff0c;我们并不想要某个分类栏目的文章显示在zblogphp首页的中&#xff0c;也就是说&#xff0c;我们可以让某一个或多个分类ID下的文章隐藏不显示在网站首页中&#xff0c;操作方法如下&#xff1a;第一种&#xff1a;判断分类方式此方法可以通过指定分类ID或分…

php301内页重定向,通过修改.htaccess批量实现网站内页301重定向跳转

本文主要介绍如何通过正则表达式实现批量内页跳转。在写之前我们先来认识几个简单的符号所代表的含义1、(.) 代表任意字符(包括汉字、英文字母等)2、(\d)代表是任意数字(仅仅是阿拉伯数字)3、$1、 $2 、$3 、$4表示的是对前面出现的变量的引用(你理解这个意思就行了)一、简单的…

linux系统服务部分,linux系统由哪几部分组成_网站服务器运行维护

笔记本如何禁用自带键盘_网站服务器运行维护笔记本禁用自带键盘的方法&#xff1a;1、首先右键点击【计算机】&#xff0c;选择【属性】&#xff1b;2、然后打开【设备管理器】&#xff0c;右键点击【PS/2标准键盘】&#xff0c;选择【更新驱动程序软件】&#xff1b;3、最后安…

Flask项目之手机端租房网站的实战开发(五)

说明&#xff1a;该篇博客是博主一字一码编写的&#xff0c;实属不易&#xff0c;请尊重原创&#xff0c;谢谢大家&#xff01; 接着上一篇博客继续往下写 &#xff1a;https://blog.csdn.net/qq_41782425/article/details/85706012 目录 一丶图片验证码前端编写 二丶短信验证码…

服务器配置iis,php网站

1.在iis中选择物理路径。配置域名 2.添加php默认文档 3.修改处理程序映射 4.设置模块映射信息 转载于:https://www.cnblogs.com/zhangyouwu/p/10277174.html

linux boost内存池,Boost内存池的分类 - 开源C++函数库Boost内存池使用与测试_Linux编程_Linux公社-Linux系统门户网站...

4. Boost内存池的分类Boost内存池按照不同的理念分为四类。主要是两种理念的不同造成了这样的分类。一是Object Usage和Singleton Usage的不同。Object Usage意味着每个内存池都是一个可以创建和销毁的对象&#xff0c;一旦内存池被销毁则其所分配的所有内存都会被释放。Single…

黑科技网站

1&#xff1a;PDF派 https://www.pdfpai.com/&#xff08;20个好用的PDF在线工具&#xff0c;完全免费&#xff01;&#xff09; PDF派 是一个完全免费的网站&#xff0c;非常良心实用。 把PDF转换成Office&#xff0c;iWork&#xff0c;图片等其他格式 把Office文件或图片…

网站加载 Waiting (TTFB) 时间过长的原因和解决办法

关注网页前端性能的朋友&#xff0c;在优化网页性能的时候都会遇到网站加载 Waiting&#xff08;TTFB&#xff09;时间过长的问题。对于没有优化过的 WordPress 站点&#xff0c;TTFB 时间经常超过了页面内容的下载时间&#xff0c;为用户带来不必要的等待时间。这个问题的主要…

linux ipv4 keepalive,性能优化策略 - RHEL 4 性能优化详述_Linux教程_Linux公社-Linux系统门户网站...

RHEL 4 性能优化详述性能优化策略[日期&#xff1a;2007-08-22]来源&#xff1a;Linux公社作者&#xff1a;Linuxidc[字体&#xff1a;大 中 小]七、性能优化策略7.1 基本优化1) 关闭后台守护进程系统安装完后&#xff0c;系统会默认启动一些后台守护进程&#xff0c;有些…

未备案服务器有影响吗,未备案的服务器对网站seo有影响吗?

原标题&#xff1a;未备案的服务器对网站seo有影响吗&#xff1f;在早期的SEO工作中&#xff0c;我们经常在国内选择一些特殊线路&#xff0c;可以有效的避免网站备案所带来的麻烦&#xff0c;但随着近几年&#xff0c;ICP备案审查越发严格&#xff0c;导致在中国大陆上线的网站…

php网站套模板教程,PTCMS小说网站全新版源码+内附4套精美模板+教程

源码介绍&#xff1a;最新PTCMS小说精美多风格四套全新版源码模板内附详细的安装教程&#xff0c;亲测完美搭建。安装教程安装宝塔面板一键安装环境宝塔&#xff1a;www.bt.cn必装环境&#xff1a;nginx(apache.iis也可)&#xff0c;mysql,php5.6,memcached1.上传网站文件到网站…

worepress使用相对路径访问网站

在wp-config.php写入以下语句&#xff1a; define(WP_HOME, /); define(WP_SITEURL, /);这样在设置中的URL会显示空白&#xff0c;这就是使用了相对路径&#xff0c;不然的话难以兼容http和https协议。

网站空间与服务器的区别,网站空间与服务器的区别

网站空间与服务器的区别 内容精选换一换服务器迁移通常有三种手段&#xff1a;全新部署业务、主机迁移服务、镜像迁移&#xff0c;如表1所示。对于华为云上云服务器的跨帐号跨区域迁移&#xff0c;建议采用镜像迁移方式。跨帐号跨区域迁移云服务器的方案为&#xff1a;帐号A将区…