作为一个□□小白。在公司实□□□□习的这段△期间朦朦□□胧胧地学★会了很多□□□很多。
- 文件命名□□□□方面的注□□□□意问题。文件最好□□□用英文命□□□名，这便于后□□□□期同事的◢访问。
- 拿到设计□□□图时，先打开设□□□□计图，看看有没□□□有公共部□□□分之类的（一般是头□□□□部nav和尾部footer），便于减少♦后续编写□□□代码的时□□□□间和繁琐□□性。
- 在切取图◆片之前，先按ctrl+1（photoshop的快捷键），这个快捷□□□□键可以使□□设计图放□□□大或缩小□□□到设计图□□□原有的大▼小。这个就便□□□□于我们之□□□□后剪切出□□□来的图片□□□□是设计图□□中正常像□□素（也就是设□□□□计师当时□□所设计的◈像素）。
- 关于图片□□□□切图问题。如果要图□□□□片高清晰□□□最好使用jpg；不过，一些特殊□□□□形状图片，如圆形，棱形最好◉使用带透◆明的png格式图片。一般设计□□□师所给的psd图里的图□□标（微信、qq、微博等），这些一般□□□□是圆形图□□□片。这些的话□□个人建议□□使用第二☆种——带透明的png格式图片。
- 设计师所□□□给的psd图里面所□□需要的剪□□□□切的图片，大部分都□□□是以整数□□□为宽高，所以剪切□□□□起来还是□□□很方便的。但，有时如果□□设计师宽◢高少了1px（通常情况□□□□下是不可□□□□能发生的），也别多切1px。如果发现□□自己现在□□□所剪切的□□□□图片是以8或者9为位数的□□话。还是强烈·建议你放❖大看看是◣不是少切□□□□了一点点（photoshop放大快捷◤键ctrl++）。
- 关于图片□□大小问题，如果在不□□同页面看□□见相同的丨图片，建议你是□□最好用同□□□一张，这样可以□□节省内存。
- 关于选区psd色系的方□□□□法。如果是文□□字的话，我是直接▼选中文字，然后查看□□□□以下信息。如图1-1。
图1-1
图1-1中的红色□□□□标识符1代表文字□□□的颜色、红色标识□□符2代表文字◥的字体、红色标识□□□符3代表文字◢的大小、红色标识□□□□符4代表文字★的行高、红色标识□□□符5代表文字□□不加粗（如果是
浑厚的话即为字体需要加粗）。
- 关于图片□□□与图片、文字与图□□□片、文字与文□□□字之间的□□间距问题。我一般是□□□用选择工□□□□具或者切◤片工具查□□看大小。之后再编□□写进页面□□里面，有时间的□□话，还可以展✦示页面再□□□□利用电脑•自带，或者qq、微信所带□□□□的剪切工□□□具来与设□□□计图进行◤像素对比。
- 关于html文件排版问题。
① 建议css、html、js都分开存□□□放。特殊情况□□□□下不能分□□开的话，尽量js代码、css代码别和html内容代码□□混合在一□□□起。
② html主要是编□□□□写页面内□□容，也就是用●户所看见□□□的内容。在实现设□□□计师效果□□图的基础□□□上，尽量做到□□□代码整洁、排版规律。这样既便□□□□于自己发□□□现错误、也方便后□□□台同事后□□续工作。
我现在学到的基本就是这些，希望可以对你有所帮助。
作者：菲律宾j9集团冯秋宁
