蓝鸢梦想

 找回密码
 立即注册

QQ登录

只需一步,快速开始

展开

站内通知     

查看: 230|回复: 0
收起左侧

[PS教程] 43个PSD转HTML CSS切图教程(英文)

[复制链接]
  • TA的每日心情
    难过
    前天 14:09
  • 签到天数: 132 天

    连续签到: 1 天

    [LV.7]常住居民III

    Lanyuan 发表于 2019-7-2 23:03:08 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    英文教程,参考学习

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是 div,很明显是无法达到语义化标准的。在国外xHTML+CSS(DIV+CSS)也可以叫做PSD2XHTML。

    以下是43个PSD to XHTML及CSS教程:

    1.将 PSD 源文件转换 XHTML 教程


                                   
    登录/注册后可看大图

    2.叫你如何创建水平滚动网站布局


                                   
    登录/注册后可看大图

    3.从PSD到xHTML,按部就班教你创建DIV+CSS布局


                                   
    登录/注册后可看大图

    4.从零开始创建CSS布局


                                   
    登录/注册后可看大图

    5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

    感兴趣的话也可以看看这个实例的设计教程,已译成中文
    网页设计教程:使用Photoshop设计一个高档时尚的网页


                                   
    登录/注册后可看大图

    6.4个简单的教程教你将PSD制作成CSS HTML


                                   
    登录/注册后可看大图

    7.使用Drupal创建Killer乐队网站:6篇系列教程

    这是个非常棒的关于使用Illustrator制作页面,Drupal(世界最著名的CMS系统之一)编码,符合标准的xHTML+CSS

    完整教程索引:
    第一部分:使用Illustrator设计页面
    第二部分:使用Illustrator切图
    第三部分:写xHTML
    第四部分:Drupal主题模板
    第五部分:Drupal管理
    第六部分:总结和一些附加资源


                                   
    登录/注册后可看大图

    8.教你如何使用CSS创建性感的按钮


                                   
    登录/注册后可看大图

    9.很酷的水平菜单悬停变大效果


                                   
    登录/注册后可看大图

    10.CSS模板教程


                                   
    登录/注册后可看大图

    11.控制文本渐变效果CSS教程


                                   
    登录/注册后可看大图

    12.CSS超大背景教程


                                   
    登录/注册后可看大图

    13.将PSD效果图转换成HTML


                                   
    登录/注册后可看大图

    14.PSD切图和页面的实现


                                   
    登录/注册后可看大图

    15.模糊背景效果


                                   
    登录/注册后可看大图

    16.使用CSS Sprites(将图片集合在一张图片中) 技术教程


                                   
    登录/注册后可看大图

    17.手绘风格CSS导航按钮


                                   
    登录/注册后可看大图

    18.创建类似Crazy Egg价格列表效果的表格列高亮效果


                                   
    登录/注册后可看大图

    19.CSS菜单教程


                                   
    登录/注册后可看大图

    20.Photoshop教程+切片+CSS编码

    这个教程将教你使用Photoshop制作简洁的纵向菜单。


                                   
    登录/注册后可看大图

    21.为网页模版切片并用CSS编码


                                   
    登录/注册后可看大图

    22.为你的第一个PSD网页效果图编码教程


                                   
    登录/注册后可看大图

    23.使用简单的操作完成复杂的CSS布局实例


                                   
    登录/注册后可看大图

    24.使用CSS来让你的页脚固定


                                   
    登录/注册后可看大图

    25.教你如何将PSD转换成xHTML-视频教程


                                   
    登录/注册后可看大图

    26.高级CSS导航实例教程


                                   
    登录/注册后可看大图

    27.教程:为你的DIV+CSS布局编码


                                   
    登录/注册后可看大图

    28.教你如何为网页变换样式


                                   
    登录/注册后可看大图

    29.浮动教程


                                   
    登录/注册后可看大图

    30.CSS切片教程:选择正确的布局


                                   
    登录/注册后可看大图

    31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果


                                   
    登录/注册后可看大图

    32.CSS Sprites + 圆角


                                   
    登录/注册后可看大图

    33.简单3步制作圆角布局


                                   
    登录/注册后可看大图

    34.CSS样式教程


                                   
    登录/注册后可看大图

    35.转换Photoshop效果图


                                   
    登录/注册后可看大图

    36.制作CSS纵向菜单


                                   
    登录/注册后可看大图

    37.使用CSS固定页脚背景图


                                   
    登录/注册后可看大图

    38.一个简单的散列布局启蒙教程


                                   
    登录/注册后可看大图

    39.两列布局CSS教程


                                   
    登录/注册后可看大图

    40.CSS布局技巧:完成100%高度


                                   
    登录/注册后可看大图

    41.附带一个’behavior’文件的纵向CSS菜单


                                   
    登录/注册后可看大图

    42.光滑的设计,HTML实例


                                   
    登录/注册后可看大图

    43.DIV+CSS布局教程


                                   
    登录/注册后可看大图

    如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话,我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。






    上一篇:Photoshop快速的抠出红色婚纱新娘照片教程
    蓝鸢梦想,属于我们的天空之城~

    快速回复 返回顶部 返回列表