PSD to HTML - 如何执行我的背景图形？

Question

我是新来的，也是网络开发/设计界的新手，所以请和我一起裸照。 ：]

我想开始我的第一个网站，我已经在Photoshop中创建了我的布局，但我不知道如何去将我的图形元素放入正确的'divs'试图完成它。

这里是我想出了布局，

我想要做的是，首先用头，我想要的颜色的线（线程）扩大100％的浏览器宽度，而徽标保持居中。我试过这样做，但在一个.png文件中的这些线程的整个宽度（图像大小约100px乘1200px），但这似乎有问题。

我的标题下方的“内容区域”图形是一种具有内向透视的框，我希望保持框边缘的完整性，同时高度随时间波动，具体取决于多少内容已到位。我怎样才能执行这个权利？我尝试用我的盒子作为背景图像制作一个容器div，其高度为100％，但图像似乎没有缩放：[。

请帮助我，任何智慧的话将不胜感激，因为我正在努力使这个网站的家庭成员。

Answer 1

好的，所以根据你的布局做得如何，我假设你已经把所有东西都分成了几层。如果你没有，那就这样做。

接下来，请注意，我们现在通常使用重复模式。我们曾经使用缩小的巨型图像，但是这消耗了大量的数据，而且由于设计模式变得更简单，我们只是使用模式。

所有的文本都可以在CSS中轻松完成，所以我们将忽略它。

接下来，隐藏除正在处理的一个元素之外的所有图层，然后转到文件>保存为网页。确保您选择允许透明度的文件格式。如果你想精确地复制你的设计，你可能会有很多元素：logo，珠子，5个像素宽的字符串，水平边框，垂直边框和另一个图像边界的每个角落。你也可以使用一个图像，并在CSS3中旋转它们，但这并没有得到广泛的支持。

接下来，学习一些HTML和CSS。严重的是，不要咬得更多，而不是咀嚼。

当你知道如何做到这一点后，将你的网站分成多个div：一个标题，一个导航和一个正文。

对于标题，将背景设置为您的小条并将background-repeat设置为x。

将徽标放在标题内并将边距设置为“0 auto”。这将以它为中心。

再次，只需使用CSS的文字。

最后，为了您的身体边界与视角...这一个有点难。你可以创建3个div，并使用顶部，侧面，身体而不是侧面+角落。或者你可以坚持这一点，并创建4个divs：每个边缘一个，每个角落一个。

但是，我只是坚持CSS为你的边界。应用我所说的做法有点困难，您必须移除照明以使其平铺良好。使用CSS3，你可以设置一些很酷的阴影，如果你想做挤压。

请注意，您不必这样做，这只是我该怎么做。

Answer 2

我想添加到以前的答案，你可以创建一个模式与线程。垂直裁剪线上的布局。无论您的线程高度如何，大约10px。然后使用CSS重复如下模式：

body { 
    background-image: url(images/pattern.png); 
    background-repeat: repeat-x; 
} 

在YouTube上有很多视频可以开始。 PSD to HTML YouTube videos

Answer 3

我要和你一起经历这一步。首先，你需要在不同的图层中分离出你的Photoshop。切出Photoshop文件的图层和部分时，尽量保持图像尽可能小。例如，您的彩色线条不一定是100x1200像素的图像。它可以是重复的100px x 10px图片。

您可以在报头中的标志和线程/彩色线条结合在了一起：

<header> 
    <img src="logo.png" /> 
</header> 

标志将在<img>标签和线程去（你已经通过10px的削减重复播放的100像素图像）会在标题的背景中出现。 CSS的会是这个样子：

header { 
    background: url('colored_line_threads.png') repeat-x center; 
    text-align: center; 
    width: 100%; 
} 

的background-repeat财产repeat-x可确保彩色线条仅沿水平轴重复。 background-position属性center确保线条在<header>容器中垂​​直居中。

至于围绕内容的斜面边框，您需要从photoshop文件中剪出一些策略图像。我建议使用全部四个角来制作图像，使用顶部和底部水平边框的图像以及使用左侧和右侧垂直边框的图像。然后是这个问题的HTML/CSS组件。我相信有更好的方法可以做到这一点，但是我想出了一种方法，我们可以在每个边界部分都有div。

<div class="content"> 
    <div class="border"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 

    <div class="corner"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 

    <p>Some text here...</p> 
</div> 

这里，我创建了两个<div>集装箱，集装箱<div>里面：一个是四角，一个用于四个边界。 CSS的会是这个样子的边界：

.border div { 
    position: absolute; 
} 

.border div:nth-child(2n) { 
    background: url('border_horizontal.png'); 
    width: 100%; height: 50px; 
} 

.border div:nth-child(2n+1) { 
    background: url('border_vertical.png'); 
    width: 50px; height: 100%; 
} 

.border div:nth-child(1) { 
    top: 0px; left: -15px; 
    background-position: 0px 0px; 
} 

.border div:nth-child(2) { 
    top: -15px; left: 0px; 
    background-position: 0px 0px; 
} 

.border div:nth-child(3) { 
    top: 0px; right: -15px; 
    background-position: 50px 0px; 
} 

.border div:nth-child(4) { 
    bottom: -15px; left: 0px; 
    background-position: 0px 50px; 
} 

边境容器中的每个div代表的内容容器的边界，我们使用重复的图像显示的边界。在角落，一个div每个角落同样的事情：

.corner div { 
    position: absolute; 
    background-image: url('corners.png'); 
    width: 50px; height: 50px; 
} 

.corner div:nth-child(1) { 
    top: -15px; left: -15px; 
    background-position: 0px 0px; 
} 

.corner div:nth-child(2) { 
    top: -15px; right: -15px; 
    background-position: 50px 0px; 
} 

.corner div:nth-child(3) { 
    bottom: -15px; left: -15px; 
    background-position: 0px 50px; 
} 

.corner div:nth-child(4) { 
    bottom: -15px; right: -15px; 
    background-position: 50px 50px; 
} 

你可以看到代码的其余部分，并在此CodePen树旁玩耍：http://codepen.io/phantomesse/pen/safcK。

这只是构建HTML和CSS的一种方法。有很多方法可以做到这一点（可能还有更好的方法），所以继续练习吧！