前端切图，把psd文件做成一个网页

最新推荐文章于 2024-11-10 11:39:38 发布

原创最新推荐文章于 2024-11-10 11:39:38 发布 · 8.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #切图

前端专栏收录该内容

64 篇文章

订阅专栏

本文分享了一个详细的切图作业流程，包括分析PSD文件、切图并生成图片、编写HTML和CSS代码等步骤。

马上要去报到上班鸟，好激动，过年假期玩傻了，作业还没完成，希望不会被劝退！！！

关于切图作业，先缕缕大致步骤：

1、拿到psd文件，先分析，对页面的结构有个大致了解，最好可以动手画画草图；

2、根据分析切图、生存图片；

3、写出页面中所有的元素的HTML代码；

4、编写CSS代码；

5、进一步完善，优化，测试浏览器兼容等问题；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大奋齐

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【前端初级项目】学成在线网站首页，HTML+CSS，附PSD设计稿！！

coderYYY的博客

11-07

1938

学成在线网站首页，只有一张首页，适合刚学HTML，CSS的同学练手，虽然只有一张静态页面，但是总体上还是很精致的。代码中我做了详细的注释，新手可以看看，里面还有PSD设计图，可以自己试试看切图和测量，体会一下前端项目开发。

完整的切图页面代码编写-案例

m0_37634735的博客

06-30

653

这个页面只有3个点需要注意，我用红框标出了，我把内容部分分为4块，第一块的幻灯片滚动展示js实现需要注意一下；第二块的公告通知列表向上滚动js实现需要注意一下；第四块的图片新闻从右向左滚动js实现需要注意一下。 ps取色时的rgb值，获取网站：https://tool.css-js.com/rgba.html 完整完成页面如下代码实现如下：比较简单 <!DOCTYPE html> <html lang="en"> <head> <me..

参与评论您还未登录，请先登录后发表或查看评论

将PSD转换为前端网页其它注意事项

叶落有声

11-25

1621

前期准备 HTML CSS Photoshop 知识点 CSS和HTML代码配合 CSS命名和HTML标签结构应用如何用好photoshop去审视一个设计稿浏览器兼容性 1. 样式文件和初始化审视psd，查看结构，初步估计工作量和样式规范创建合理的目录结构划分样式结构：重置样式，公共样式，独立样式（这里提供一个重置样式的CSS代码） // reset.css body,di

根据PSD登陆页面设计稿切图制作HTML网页全过程

热门推荐

遇见更好的自己

02-16

2万+

切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。实例: 下面通过一个简单的登陆页面PSD设计稿

根据效果图自动切图生成静态页面工具.

07-22

根据你的设置自动切图并且生成静态页面html.十分强大

android psd切图,请问前辈，前端根据PSD设计稿切图究竟要怎么处理，我一直都没搞懂。。。...

weixin_31362539的博客

06-01

282

之前写过的关于图片的选取的。既然你写过ios的，那么你首先要知道为什么你需要不同的切图？不同的切图是为了在不同分辨率的设备上，表现出最好的效果，最简单的例子就是，100300的图片，放到300900的容器中，就会出现马赛克。当100300的图片，放到50150的容器中，也会模糊，因为显然多了很多的像素点。然后你需要明白什么是逻辑像素逻辑像素就是设备告诉浏览器，我的宽是多少，高是多少什么是物理像素物...

简单用PS处理PSD文件

qq_41625074的博客

03-03

1699

我们在写一个页面时经常需要插入一些图片，当从UI手上拿到设计稿后该如何快速简单的把所需要的图片从psd文件上单独存为一个图片呢？接下来讲述一些基本的操作。 psd文件中有多个图层，所以当我们想要去选择自己所需图层时，应该先选择“移动工具”，然后勾选工具栏的“自动选择”和“图层”。这样的话我们移动工具点击时选中的是一个图层，而不是一组。如图红色区域所示：想要同时选择多个图层就选择的同时按住...

web切图工具 css,WEB前端之切图篇

weixin_35699471的博客

08-04

580

《WEB前端之切图篇》由会员分享，可在线阅读，更多相关《WEB前端之切图篇(25页珍藏版)》请在人人文库网上搜索。1、WEB前端图片篇,分享者：王志程,矢量图与位图,矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计...

psd文件生产html,PSD文件切图制作html全过程记录

weixin_34161139的博客

07-07

1099

PSD文件切图制作html全过程记录最后效果图：新建文件夹开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器(Dreamweaver)，并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：打开index.html文...

shop-029_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

08-02

切片工具可以将大型的PSD文件分割成多个独立的部分，每个部分对应网页上的一个特定区域，如导航栏、产品展示区、购物车等。这样做不仅便于管理和编辑各个部分，还能优化网页加载速度。文件名"asaweb_s471"可能代表的...

GR-138_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

08-02

"GR-138_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这个压缩包文件提供了丰富的素材和资源，帮助设计师们快速构建具有欧美和日韩风格的高质量网页。下面我们将深入探讨这些知识点。首先，PSD...

前端 psd切片生成html.css,1个将PSD网页模板切片输出为DIV+CSS架构网页教程

weixin_35840387的博客

06-08

659

从PS里面将之前的设计稿从PS里面输出然后再加上编码，转换成div+css架构。既有利于web优化而且更符合web发展趋势及标准。在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，...

怎么根据PSD文件写html,利用psd文件写出html css结构的流程

weixin_31495827的博客

06-19

762

1、拿到psd文件后先大概定义页面的div结构，然后一行一行的写,ctrl + r 显示隐藏标尺右击标尺 --- 把里面的单位一律改为像素,alt + -可以放大缩小psd文件，space+鼠标左键可以拉动psd文件ctrl+d可以取消选区1>删除默认的内外边距。先写顶部的HTML结构后写顶部的CSS样式。注意版心居中，利用margin:0 auto实现盒子的居中显示，注意文本只能用te...

前端笔记-psd到html

weixin_30652879的博客

01-25

281

1.颜色拾取：吸管工具吸取后，进入拾色器，复制rgb 2.取透明背景图片：选中后转化为智能对象，框选后复制，ctrl+n,ctrl+v,保存成png即可 3.裁取图片：框选后图像-裁剪，存储为web...品质为60%即可 4.量取尺寸，距离：使用框选工具即可，在编辑-首选项-单位与标尺调整为像素单位 5.字体大小：T选中后 6.注意行间距问题消除：1.将元素排...

GR-077_前端网页模板设计指南：从PSD到前端实现

最新发布

weixin_34535286的博客

11-10

1267

本文还有配套的精品资源，点击获取简介：本课程深入探讨了PSD模板在前端页面设计中的应用和重要性。通过介绍PSD文件的基础知识、切片技术、欧美与日韩风格以及团队协作的便利性，本课程旨在教授设计师和前端开发者如何有效利用PSD模板，提高设计质量和项目执行效率。课程内容涵盖了网页设计的各个方面，包括布局、色彩、字体调整，以及如何将PSD文件转化为响应式的前端代码，最终创建出吸引...

根据图片原型写一个html页面,如何分分钟开发高保真交互原型_html/css_WEB-ITnose

weixin_33664951的博客

06-03

2186

产品开发，体验先行。由于软件产品开发的成本比较高，所以在开发之前，往往先由目标用户来验证产品创意的价值，而最高效的方法就是通过高保真交互原型进行测试。天下武功，唯快不破。在日新月异的互联网市场，产品经理必须迅速评估创意，挑选具有潜力的点子。常规的做法是：各个页面的静态效果图评审通过之后，立即交给开发人员评估高保真交互原型的开发工作量，评估的结果往往是需要两三天，甚至两三周的开发时间。本文介绍4点快...

前端切图实战（PSD设计稿转化为前端）

a631278993的博客

08-19

2702

课程来源：https://www.imooc.com/learn/668 一：读设计稿划分：头部、尾部、公共部分、大概分多少块、logo的重用、列表有哪些、各部分用什么技术实现等等。二：建立项目目录三：编写重置样式不同的标签有着默认的样式，不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。...

【前端demo】从PSD到html（附完整资源）

sinat_38368658的博客

05-30

1775

项目源码包含psd文件+源码+图片资源链接：https://pan.baidu.com/s/1hS_fv70GsPn77gf_sKusRQ 提取码：tgbj 最终效果图项目结构 C:. │ index.html │ list.txt │ project.txt │ ├─css │ common.css │ index.css │ reset.css │ ├─images │ demo1.jpg │ demo2.png │

html psd设计图,根据PSD登陆页面设计稿切图制作HTML网页全过程

weixin_35942678的博客

06-05

1295

切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。实例:下面通过一个简单的登陆页面PSD设计稿来演示转化为...