Discover how to create stunning photo manipulations in Photoshop. In this course, you'll learn everything from photographing models to creating dark conceptual artworks. If you enjoy our photo manipulation tutorials, you will absolutely love this course.
![step-018g[5] step-018g[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018g5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018h[5] step-018h[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018h5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018i[5] step-018i[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018i5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018j[5] step-018j[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018j5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018k[5] step-018k[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018k5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018l[5] step-018l[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018l5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018m[5] step-018m[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018m5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018n[5] step-018n[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018n5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018q[5] step-018q[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018q5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-018o[5] step-018o[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-018o5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
Step 19 - portfolio layout
It's actually last step in design part. This time we will create works showcase. Hide all layers connected to the sidebar, pagination, posts and RSS feed icon so we will have blank content base once again.![step-019[5] step-019[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-0195.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-019b[5] step-019b[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-019b5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-019c[5] step-019c[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-019c5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-019d[5] step-019d[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-019d5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-019e[5] step-019e[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-019e5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-019f[5] step-019f[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-019f5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
Step 20 - template
To continue this tutorial you should at least have some basics about html and CSS. Before you will start doing anything download my blank template. You will find there all needed folders ([fonts] with web-fonts and [graf] for images), basic html, blank CSS (with reset-CSS built in) and in-html link to jquery JavaScript library. At first we will create a main page blog view. Then single-post view should be a matter of few minutes. Let's start from background. It's not pretty complex, yet can produce troubles for some. Actually there are two repetitive backgrounds: dark, starry on header that will repeat in x axis and light paper that will be centered and repeated in y axis. Let's copy one piece of header that will be in fixed size 40x340 pixels.![step-020[5] step-020[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-0205.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-020b[5] step-020b[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-020b5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
![step-020c[5] step-020c[5]](https://cdn.photoshoptutorials.ws/images/stories/ddb09352d992_2F5/step-020c5.jpg?strip=all&lossy=1&quality=64&w=1920&ssl=1)
2 comments on “Complete Guide to Creating a Blog Website Layout”
awesome post!
thanks for sharing..
Dzięki za tutka. Muszę przyznać że fajnie wygląda ale przy 8 latach doświadczenia wszystko można zrobić :)
BTW:
Czemu mnie nie dziwi że w komentarzach pojawia się flame ? ;d