我是前端小白，请问各位前端是如何根据psd文件裁剪出想要的图片，希望传授点经验

Question

今天公司给了我一个psd文件，让我照着图片设计，但是我不知道应该哪些东西需要设计，哪些东西需要变成图片？如何把素材变成自己想要的图片呢？

Answer 1

你设计视觉稿的过程，其实就是写HTML和CSS的过程。

换句话说，你设计过程中的每一步操作，都对应于一句HTML或者CSS代码。

比如设计一个导航栏(#navbar)，图层就可以命名为navbar，而navbar下面的组件元素就可以都放在同一个图层或者图层文件夹中；然后添加一个导航栏外部容器(.container)，给其添加背景色(backgroud-color:#FFD100)；然后添加一些导航链接(.item)，添加链接的文本内容……

顺着这个思路，你在设计过程中，你可以预先解决HTML元素命名、CSS样式数据、HTML与CSS模块化策略、响应式网页设计策略、跨浏览器兼容性策略等问题。

视觉稿实际完成，你会发现哪里需要切图，哪里可以直接用HTML/CSS代码实现，一切问题都了然于心。

所以说，网页交互设计、视觉设计，与HTML/CSS/JS开发是密不可分的，没有明确的先后关系。

凡是把视觉设计、交互设计，与HTML/CSS/JS开发，看作是两个不同的工种的，都不是“真前端”。