{"id":15039,"date":"2012-09-27T23:01:15","date_gmt":"2012-09-27T15:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15039"},"modified":"2024-04-08T18:20:35","modified_gmt":"2024-04-08T10:20:35","slug":"blog-layout-in-photoshop-cs6","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/","title":{"rendered":"Designing a Clean and Elegant Blog Layout with Photoshop"},"content":{"rendered":"<p>In this guide, I\u2019ll walk you through the steps to create a <strong>minimalist and refined blog design<\/strong> utilizing the power of the latest version of <a href=\"https:\/\/www.hongkiat.com\/blog\/category\/photoshop\/\">Photoshop<\/a>. You\u2019ll learn how to efficiently use <strong>Character Styles<\/strong> and <strong>Paragraph Styles<\/strong> to simplify your design process.<\/p>\n<p>Before starting, ensure you have these resources at your disposal:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fonts\/Sansation\">Free Font Sansation<\/a> courtesy of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/foundry\/Bernd%20Montag\">Bernd Montag<\/a>.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webfx.com\/blog\/web-design\/free-social-media-icons-for-designers-a-life-in-pixels\/\">Free Social Media Icons<\/a> by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.danieleselvitella.com\/\">Daniele Selvitella<\/a>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/demo\/final-large.jpg\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo<\/span><\/a><\/p>\n<h2>Setting Up Your Workspace<\/h2>\n<h3>Step 1<\/h3>\n<p>For our project, we\u2019re utilizing the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/960.gs\/\">960 gs<\/a> framework. Start by downloading the framework from the official site. Within the zip file you download, look for the Photoshop document named \u201912 Column Grid\u2019 and open it with Photoshop.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg\" alt=\"Loading the 12 Column Grid file\" width=\"550\" height=\"529\"><\/figure>\n<p>Toggle the visibility of the 12 Col Grid layer off by clicking the eye icon; we won\u2019t be needing it just yet.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-002.jpg\" alt=\"Hiding the 12 Column Grid layer\" width=\"550\" height=\"529\"><\/figure>\n<h3>Step 2<\/h3>\n<p>Our current canvas size is a bit on the smaller side. To adjust, go to <strong>Image &gt; Canvas Size<\/strong> (or press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Alt<\/span> + <span class=\"key\">C<\/span>) and input a larger dimension, ensuring the anchor point is set to the center.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-003.jpg\" alt=\"Expanding the canvas size\" width=\"451\" height=\"353\"><\/figure>\n<h3>Step 3<\/h3>\n<p>Activate the ruler by hitting <span class=\"key\">Ctrl<\/span> + <span class=\"key\">R<\/span>. Navigate to <strong>View &gt; New<\/strong> Guide to introduce a new guide, aiding in precise design. Choose <strong>Vertical<\/strong> and set the Position to <strong>185 px<\/strong> for a vertical guide 185 px from the top left corner of the canvas.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-004.jpg\" alt=\"Setting up a new guide\" width=\"550\" height=\"302\"><\/figure>\n<h3>Step 4<\/h3>\n<p>Add more vertical guides at positions <strong>150 px<\/strong>, <strong>1095 px<\/strong>, and <strong>1130 px<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-005.jpg\" alt=\"Drawing another vertical guide\" width=\"345\" height=\"272\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-006.jpg\" alt=\"Additional vertical guide\" width=\"345\" height=\"303\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-007.jpg\" alt=\"Final vertical guide placement\" width=\"345\" height=\"303\"><\/figure>\n<p>Below, you can see our canvas with the final guide layout.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-008.jpg\" alt=\"Complete guide overview inside the canvas\" width=\"545\" height=\"212\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-009.jpg\" alt=\"Final guide setup\" width=\"341\" height=\"277\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-010.jpg\" alt=\"Overview of guide setup in canvas\" width=\"336\" height=\"352\"><\/figure>\n<h2>Choosing Your Color Palette<\/h2>\n<h3>Step 5<\/h3>\n<p>We\u2019ll select a beautiful color scheme from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.colourlovers.com\/palette\/2121996\/APPLE_BLOSSOMS\">Colorlouver<\/a> for our design. Start by clicking on the Preview link to view the color combination as a jpeg file.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-011.jpg\" alt=\"Previewing color combination\"><\/figure>\n<p>After saving the color combination, add it to your Photoshop project. By integrating the image into our canvas, we can quickly and effortlessly sample the colors from it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-012.jpg\" alt=\"Color palette placed in Photoshop\" width=\"252\" height=\"185\"><\/figure>\n<h2>Creating the Background<\/h2>\n<h3>Step 6<\/h3>\n<p>Begin by selecting the <strong>Background layer<\/strong> and click the lock icon at the top of the Layers panel to unlock it. Then, double-click the layer thumbnail to change its color.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-013.jpg\" alt=\"Unlocking the Background layer\" width=\"384\" height=\"301\"><\/figure>\n<p>Choose the color <strong>#948371<\/strong> by clicking on it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-014.jpg\" alt=\"Selecting background color #948371\" width=\"384\" height=\"356\"><\/figure>\n<h3>Step 7<\/h3>\n<p>On the canvas, draw a rectangular shape. This will serve as the secondary background layer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-015.jpg\" alt=\"Drawing the second background\" width=\"500\" height=\"380\"><\/figure>\n<h3>Step 8<\/h3>\n<p>With the shape still selected, head to the <strong>Option Bar<\/strong>, click on the <strong>Fill Color<\/strong> box, and then select the color wheel icon. In the Color Picker dialog that appears, choose the first color. Set the <strong>Stroke<\/strong> color to <strong>None<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-016.jpg\" alt=\"Choosing fill and stroke colors\" width=\"500\" height=\"420\"><\/figure>\n<h3>Step 9<\/h3>\n<p>Create a new layer and select the top portion of the canvas with the rectangular marquee tool. Apply a <strong>radial gradient<\/strong> that transitions from white to black using the gradient tool, ensuring it\u2019s centered over the canvas.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-017.jpg\" alt=\"Applying radial gradient\" width=\"466\" height=\"376\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-018.jpg\" alt=\"Radial gradient applied\" width=\"466\" height=\"366\"><\/figure>\n<p>Adjust its <strong>Blend mode<\/strong> to <strong>Screen<\/strong> and lower the <strong>Opacity<\/strong> to <strong>37%<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-019.jpg\" alt=\"Modifying blend mode and opacity\" width=\"466\" height=\"359\"><\/figure>\n<h3>Step 10<\/h3>\n<p>Create a new layer and label it \u2018shadow\u2019.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-020.jpg\" alt=\"New layer named shadow\" width=\"266\" height=\"129\"><\/figure>\n<p>At the base of the secondary background, form a rectangular selection as displayed. Go to <strong>Edit: Fill<\/strong> and choose <strong>Black<\/strong> for <strong>Use<\/strong>. Hit <strong>OK<\/strong> to fill the area with black.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-021.jpg\" alt=\"Filling selection with black\" width=\"500\" height=\"390\"><\/figure>\n<h3>Step 11<\/h3>\n<p>Apply a Gaussian Blur to soften the shadow. Navigate to <strong>Filter &gt; Blur &gt; Gaussian Blur<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-022.jpg\" alt=\"Applying Gaussian Blur\" width=\"500\" height=\"330\"><\/figure>\n<h3>Step 12<\/h3>\n<p>Press and hold <span class=\"key\">Alt<\/span>, then hover the cursor between the \u2018shadow\u2019 and the \u2018upper background\u2019 layer. Without releasing the <span class=\"key\">Alt<\/span> key, click to <strong>convert the layer to a Clipping Mask<\/strong>. This action makes the shadow integrate seamlessly into the upper background.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-023.jpg\" alt=\"Creating a Clipping Mask\" width=\"500\" height=\"392\"><\/figure>\n<h3>Step 13<\/h3>\n<p>Adjust the shadow\u2019s <strong>Opacity<\/strong> to <strong>50%<\/strong> for a more subtle effect. The image below showcases the effect at 100% zoom.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-024.jpg\" alt=\"Adjusting shadow opacity\"><\/figure>\n<h3>Step 14<\/h3>\n<p>For better organization, it\u2019s advisable to group these layers together. To do this, <strong>select all relevant layers<\/strong> and then press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">G<\/span>.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-025.jpg\" alt=\"Grouping layers\"><\/figure>\n<h2>Designing the Header<\/h2>\n<h3>Step 15<\/h3>\n<p>On the upper part of the canvas, draw a rectangle as illustrated below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-026.jpg\" alt=\"Drawing a rectangle for the header\" width=\"506\" height=\"214\"><\/figure>\n<h3>Step 16<\/h3>\n<p>Go to the <strong>Option Bar<\/strong> and set the <strong>Stroke<\/strong> color to <strong>#af9f8e<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-027.jpg\" alt=\"Setting stroke color for the header\" width=\"331\" height=\"390\"><\/figure>\n<h3>Step 17<\/h3>\n<p>Choose a <strong>linear gradient<\/strong> for the <strong>Fill<\/strong> color, transitioning from <strong>#d0c4b9<\/strong> to <strong>#a89c91<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-030.jpg\" alt=\"Selecting linear gradient fill color\" width=\"331\" height=\"397\"><\/figure>\n<p>Here is how it looks at 100% zoom.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-031.jpg\" alt=\"Header with linear gradient fill\" width=\"331\" height=\"271\"><\/figure>\n<h2>Adding the Site\u2019s Name<\/h2>\n<h3>Step 18<\/h3>\n<p>Place the site\u2019s name on the left side of your design, as indicated in the image below. To enhance the text, double-click on it to add a <strong>Drop Shadow<\/strong>. For the text font, opt for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fonts\/Sansation\">Sansation<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-032.jpg\" alt=\"Placing the site's name\" width=\"550\" height=\"502\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-033.jpg\" alt=\"Adding drop shadow to the site's name\" width=\"550\" height=\"416\"><\/figure>\n<h2>Designing the Menu<\/h2>\n<h3>Step 19<\/h3>\n<p>Create the menu items on the opposite side of the menu bar, using the Sansation font at 14 pt. Pay close attention to their placement as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-034.jpg\" alt=\"Creating menu items\" width=\"550\" height=\"272\"><\/figure>\n<h3>Step 20<\/h3>\n<p>Highlight the active menu item by changing its font to bold.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-035.jpg\" alt=\"Highlighting active menu item\" width=\"550\" height=\"302\"><\/figure>\n<h3>Step 21<\/h3>\n<p>Use the <strong>Polygon tool<\/strong> with the <strong>Sides<\/strong> set to <strong>3<\/strong> to draw a triangle. Apply a <strong>Fill<\/strong> color of <strong>#3d3123<\/strong> and set <strong>Stroke<\/strong> to <strong>None<\/strong>. Enhance it with a <strong>Drop Shadow<\/strong> from the Layer Styles menu.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-036.jpg\" alt=\"Drawing a triangle for the menu\" width=\"500\" height=\"274\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-037.jpg\" alt=\"Applying drop shadow to triangle\" width=\"500\" height=\"372\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-038.jpg\" alt=\"Final triangle with drop shadow\" width=\"500\" height=\"166\"><\/figure>\n<h3>Step 22<\/h3>\n<p>Accentuate the active menu item further by adding a line beneath it. Use the <strong>Line tool<\/strong> with a <strong>5 px<\/strong> weight, choosing <strong>#f76b6a<\/strong> for the Fill and no Stroke. Position this line just below the active menu, ensuring a 1 px gap from the menu bar\u2019s bottom.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-039.jpg\" alt=\"Adding a line under the active menu\" width=\"550\" height=\"336\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-040.jpg\" alt=\"Line placement under the active menu\" width=\"550\" height=\"336\"><\/figure>\n<h2>Implementing Character Styles<\/h2>\n<h3>Step 23<\/h3>\n<p>Now, let\u2019s save our text settings as a Character Style, a feature inspired by InDesign\u2019s Character Styles, but simpler. First, highlight the text then click on the \u2018New Character Style\u2019 icon to save it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-041.jpg\" alt=\"Creating a new Character Style\" width=\"394\" height=\"411\"><\/figure>\n<p>Double-click on the newly created Character Style to adjust its settings as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-042.jpg\" alt=\"Configuring Character Style settings\" width=\"550\" height=\"380\"><\/figure>\n<h3>Step 24<\/h3>\n<p>Apply the Character Style to the other menu items by selecting them and clicking on the Character Style. If there\u2019s a plus sign next to the Character Style, it indicates a deviation from the set settings. To standardize the settings, click on the circular arrow icon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-043.jpg\" alt=\"Applying Character Style to menu items\" width=\"448\" height=\"399\"><\/figure>\n<h3>Step 25<\/h3>\n<p>Follow the previous steps to create a distinct Character Style for the active menu item.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-044.jpg\" alt=\"Creating Character Style for active menu\" width=\"550\" height=\"522\"><\/figure>\n<h3>Step 26<\/h3>\n<p>What makes Character Styles so useful? They allow for centralized control over text settings. By editing a single Character Style, we can simultaneously update all text elements linked to that style. For instance, changing the font of the <em>Top Menu \u2013 Normal<\/em> style to Corbel automatically updates all corresponding menu items to Corbel.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-045.jpg\" alt=\"Example of Character Style efficiency\" width=\"500\" height=\"897\"><\/figure>\n<h3>Step 27<\/h3>\n<p>Create a new layer beneath the menu bar. Use <span class=\"key\">Ctrl<\/span>-click on the menu bar to generate a new selection shaped like it. Fill this new layer with <strong>black<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-046.jpg\" alt=\"Creating and filling a new layer\" width=\"500\" height=\"193\"><\/figure>\n<h3>Step 28<\/h3>\n<p>Deselect using <span class=\"key\">Ctrl<\/span> + <span class=\"key\">D<\/span>. To soften the shadow, apply a <strong>Gaussian Blur<\/strong> from <strong>Filter &gt; Blur &gt; Gaussian Blur<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-047.jpg\" alt=\"Applying Gaussian Blur\" width=\"549\" height=\"397\"><\/figure>\n<h2>Creating the Slider<\/h2>\n<h3>Step 29<\/h3>\n<p>Create a rectangular shape that spans the width of 10 columns as shown in the image below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-048.jpg\" alt=\"Drawing the slider rectangle\" width=\"550\" height=\"726\"><\/figure>\n<p>Choose <strong>#dfd1c2<\/strong> for the <strong>Fill color<\/strong> and <strong>#c8baac<\/strong> for the <strong>Stroke<\/strong>, setting the stroke size to <strong>10 pt<\/strong>. Ensure <strong>Align Inside<\/strong> is selected by clicking the dropdown arrow next to the stroke preview.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-049.jpg\" alt=\"Setting fill and stroke for the slider\" width=\"550\" height=\"402\"><\/figure>\n<h3>Step 30<\/h3>\n<p>Insert an image on top of the frame and apply a <strong>Clipping Mask<\/strong> by pressing <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Alt<\/span> + <span class=\"key\">G<\/span>. This will confine the picture within the slider frame, allowing for adjustments in positioning and size without altering the frame itself.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-050.jpg\" alt=\"Inserting and clipping the image inside the slider\" width=\"500\" height=\"748\"><\/figure>\n<h3>Step 31<\/h3>\n<p>Behind the slider, draw another rectangular shape with the same color, aligning it to the outermost guide. Apply a <strong>Layer Style &gt; Pattern Overlay<\/strong> with a pixel pattern and adjust its <strong>Opacity<\/strong> to achieve a subtle effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-051.jpg\" alt=\"Drawing the background rectangle\" width=\"545\" height=\"546\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-052.jpg\" alt=\"Applying pattern overlay\" width=\"550\" height=\"357\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-053.jpg\" alt=\"Final subtle pattern effect\" width=\"335\" height=\"283\"><\/figure>\n<h3>Step 32<\/h3>\n<p>Above this shape, create a new rectangular shape with <strong>Fill: #b3aca5<\/strong> and <strong>no Stroke<\/strong>. Transform it by pressing <span class=\"key\">Ctrl<\/span> + <span class=\"key\">T<\/span> and then rotate it by <strong>45\u00b0<\/strong>. Apply a <strong>Clipping Mask<\/strong> to the layer shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-054.jpg\" alt=\"Rotating and clipping the new shape\" width=\"335\" height=\"646\"><\/figure>\n<h3>Step 33<\/h3>\n<p>Duplicate this shape and resize it. Alter its <strong>Fill<\/strong> to a darker shade for contrast. Again, use a <strong>Clipping Mask<\/strong> on this layer shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-055.jpg\" alt=\"Duplicating and darkening the shape\" width=\"287\" height=\"427\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-056.jpg\" alt=\"Final adjusted clipped shape\" width=\"288\" height=\"235\"><\/figure>\n<h3>Step 34<\/h3>\n<p>Follow the same process to create another arrow on the opposite side of the slider.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-057.jpg\" alt=\"Drawing an arrow on the opposite side\" width=\"276\" height=\"238\"><\/figure>\n<h3>Step 35<\/h3>\n<p><span class=\"key\">Ctrl<\/span>-click the slide frame to generate a new selection. Add a new layer and turn it into a <strong>Clipping Mask<\/strong>. Fill this new layer with <strong>black<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-058.jpg\" alt=\"Filling new layer with black\" width=\"550\" height=\"382\"><\/figure>\n<h3>Step 36<\/h3>\n<p>Remove the selection (<span class=\"key\">Ctrl<\/span> + <span class=\"key\">D<\/span>) and then apply a <strong>Gaussian Blur<\/strong> to soften the layer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-059.jpg\" alt=\"Applying Gaussian Blur\" width=\"476\" height=\"506\"><\/figure>\n<p>Adjust the shadow\u2019s <strong>Opacity<\/strong> as needed to achieve the desired effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-060.jpg\" alt=\"Adjusting shadow opacity\" width=\"550\" height=\"266\"><\/figure>\n<h3>Step 37<\/h3>\n<p>Create a rounded rectangle at the corner of the slider with a <strong>Fill<\/strong> color of <strong>#c8baac<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-061.jpg\" alt=\"Drawing a rounded rectangle\" width=\"476\" height=\"261\"><\/figure>\n<h3>Step 38<\/h3>\n<p>Inside this shape, draw a circle. Set its <strong>Stroke<\/strong> to <strong>black<\/strong>, with a size of <strong>1 pt<\/strong>, and remove the <strong>Fill<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-062.jpg\" alt=\"Drawing a circle with stroke\" width=\"550\" height=\"387\"><\/figure>\n<h3>Step 39<\/h3>\n<p>With the <strong>Path Selection<\/strong> tool, select the circle\u2019s path. Use <span class=\"key\">Shift<\/span> + <span class=\"key\">Alt<\/span>-drag to duplicate the path.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-063.jpg\" alt=\"Duplicating the circle path\" width=\"497\" height=\"320\"><\/figure>\n<p>Repeat the process to add more circles as desired.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-064.jpg\" alt=\"Adding more circles\" width=\"497\" height=\"265\"><\/figure>\n<h3>Step 40<\/h3>\n<p>Select a circle path and use <span class=\"key\">Ctrl<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">J<\/span> to move it to its own layer.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-065.jpg\" alt=\"Cutting a circle path to a new layer\" width=\"383\" height=\"249\"><\/figure>\n<h3>Step 41<\/h3>\n<p>In the <strong>Option Bar<\/strong>, eliminate the <strong>Stroke<\/strong> and set the <strong>Fill<\/strong> to a <strong>radial gradient<\/strong> transitioning from <strong>#e38989 to #bb5c5c<\/strong>. Enhance the circle with an <strong>Outer Glow<\/strong> and <strong>Drop Shadow<\/strong> from the Layer Styles menu.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-066.jpg\" alt=\"Changing fill to radial gradient\" width=\"550\" height=\"369\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-067.jpg\" alt=\"Applying Outer Glow layer style\" width=\"550\" height=\"404\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-068.jpg\" alt=\"Applying Drop Shadow layer style\" width=\"550\" height=\"360\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-069.jpg\" alt=\"Final look of the styled circle\" width=\"358\" height=\"358\"><\/figure>\n<h3>Step 42<\/h3>\n<p>Create an elliptical shape below the slider. Add a new layer and fill this shape with <strong>black<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-070.jpg\" alt=\"Drawing and filling an elliptical shape\" width=\"550\" height=\"363\"><\/figure>\n<h3>Step 43<\/h3>\n<p>Clear the selection (<span class=\"key\">Ctrl<\/span> + <span class=\"key\">D<\/span>) and then blur it using <strong>Gaussian Blur<\/strong> to create a soft shadow effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-071.jpg\" alt=\"Applying Gaussian Blur for soft shadow\" width=\"550\" height=\"391\"><\/figure>\n<h2>Creating the Lower Background<\/h2>\n<h3>Step 44<\/h3>\n<p>Construct another rectangular shape for the lower background, employing the same <strong>Fill<\/strong> and <strong>Stroke<\/strong> colors as used for the slider. This ensures consistency across your design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-072.jpg\" alt=\"Drawing lower background rectangle\" width=\"384\" height=\"500\"><\/figure>\n<p>Position it meticulously to ensure it spans across all guides on the canvas, providing a seamless look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-073.jpg\" alt=\"Careful placement of the lower background\" width=\"384\" height=\"500\"><\/figure>\n<p>Enhance this shape with a <strong>Pattern Overlay<\/strong> for added texture.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-074.jpg\" alt=\"Applying Pattern Overlay layer style\" width=\"550\" height=\"354\"><\/figure>\n<p>The detailed look of the patterned background can be seen below at full magnification.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-075.jpg\" alt=\"Final patterned lower background\" width=\"439\" height=\"367\"><\/figure>\n<h3>Step 45<\/h3>\n<p>Using the Rectangular Marquee tool, highlight the upper section of this new background area.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-076.jpg\" alt=\"Selecting upper area of lower background\" width=\"550\" height=\"368\"><\/figure>\n<h3>Step 46<\/h3>\n<p>Create a new layer and position it behind the previously made shape. Fill this new layer with <strong>black<\/strong>. Press <span class=\"key\">Ctrl<\/span> + <span class=\"key\">T<\/span>, then right-click and select <strong>Perspective<\/strong> to modify the layer\u2019s perspective.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-077.jpg\" alt=\"Adding new layer and selecting perspective\" width=\"550\" height=\"363\"><\/figure>\n<p>Adjust the perspective by dragging the upper corners outward to widen the top of the shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-078.jpg\" alt=\"Dragging upper corners outward\" width=\"550\" height=\"301\"><\/figure>\n<p>After setting the perspective, right-click again and choose <strong>Scale<\/strong>, then pull the upper edge downwards to resize the shape vertically.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-079.jpg\" alt=\"Scaling the shape vertically\" width=\"550\" height=\"283\"><\/figure>\n<p>Next, select <strong>Warp<\/strong> from the context menu and manipulate the left and right segments inward to fine-tune the shape\u2019s curvature.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-080.jpg\" alt=\"Warping the shape for desired effect\" width=\"550\" height=\"331\"><\/figure>\n<p>Apply a <strong>Gaussian Blur<\/strong> to soften the shadow created by the shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-081.jpg\" alt=\"Softening with Gaussian Blur\" width=\"548\" height=\"398\"><\/figure>\n<p>Finally, adjust the layer\u2019s <strong>Opacity<\/strong> to <strong>20%<\/strong> for a more subtle shadow effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-082.jpg\" alt=\"Reducing opacity for subtlety\" width=\"549\" height=\"271\"><\/figure>\n<h3>Step 47<\/h3>\n<p>Create a white rectangle within the background area to serve as the main content\u2019s backdrop. Ensure there\u2019s a 10 px margin on the left, right, and top sides relative to the background, utilizing the guides set in earlier steps for precise spacing. Enhance this rectangle with an <strong>Outer Glow<\/strong> from the Layer Styles menu for added depth.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-083.jpg\" alt=\"Drawing main content's white background\" width=\"472\" height=\"478\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-084.jpg\" alt=\"Applying Outer Glow to white background\" width=\"472\" height=\"478\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-086.jpg\" alt=\"Detailed view of Outer Glow effect\" width=\"550\" height=\"405\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-085.jpg\" alt=\"Final look of the main content's background\" width=\"396\" height=\"363\"><\/figure>\n<h3>Step 48<\/h3>\n<p>Introduce a new guide 25 px above the upper edge of the main content\u2019s background to help delineate space for upcoming design elements.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-087.jpg\" alt=\"Adding a new guide for spacing\" width=\"395\" height=\"302\"><\/figure>\n<h2>Adding Section Titles<\/h2>\n<h3>Step 49<\/h3>\n<p>Create a new Character Style specifically for the section titles and their descriptions on the page. This ensures consistency in typography across different sections.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-088.jpg\" alt=\"Creating new Character Style for section titles\" width=\"550\" height=\"746\"><\/figure>\n<p>Using the Type tool, input the section title and its description. Apply the previously created styles for a cohesive look. Position these elements 25 px from the top of their background, aligning them with the guide set in the previous step.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-089.jpg\" alt=\"Adding section title and description\" width=\"539\" height=\"294\"><\/figure>\n<h3>Step 50<\/h3>\n<p>Below the site\u2019s description, draw a 5 px horizontal line with a <strong>Fill<\/strong> color of <strong>#938270<\/strong> and <strong>no Stroke<\/strong>. This subtle line acts as a visual separator, enhancing the design\u2019s readability and aesthetic appeal.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-090.jpg\" alt=\"Drawing line under section description\" width=\"541\" height=\"296\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-091.jpg\" alt=\"Final look of the line under description\" width=\"541\" height=\"266\"><\/figure>\n<h2>Designing the Blog Post Section<\/h2>\n<h3>Step 51<\/h3>\n<p>Create a distinct Character Style for blog post titles to ensure they stand out and maintain consistency across your blog design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-092.jpg\" alt=\"Creating Character Style for post titles\" width=\"550\" height=\"365\"><\/figure>\n<h3>Step 52<\/h3>\n<p>Insert a blog post title and apply the newly created Character Style for a polished and uniform look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-093.jpg\" alt=\"Adding blog post title\" width=\"409\" height=\"273\"><\/figure>\n<h3>Step 53<\/h3>\n<p>Beneath the title, draw a rectangle to act as the post\u2019s feature image background, making it four columns wide. Use <strong>white<\/strong> for the <strong>Fill<\/strong> and <strong>#bebebe<\/strong> for the <strong>Stroke<\/strong>. Enhance it with a <strong>Layer Style &gt; Stroke<\/strong> for added definition.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-094.jpg\" alt=\"Drawing rectangle for post image\" width=\"500\" height=\"418\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-095.jpg\" alt=\"Applying stroke layer style\" width=\"550\" height=\"355\"><\/figure>\n<h3>Step 54<\/h3>\n<p>Place an image within this rectangle and apply a Clipping Mask (<span class=\"key\">Ctrl<\/span> + <span class=\"key\">Alt<\/span> + <span class=\"key\">G<\/span>) to ensure it fills the designated area perfectly, enhancing the post\u2019s visual appeal.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-096.jpg\" alt=\"Clipping post image within the shape\" width=\"550\" height=\"604\"><\/figure>\n<h3>Step 55<\/h3>\n<p>For additional detail, draw a rounded rectangle at the bottom of the image area with a <strong>Fill<\/strong> color of <strong>#8e8380<\/strong> and <strong>no Stroke<\/strong>, and then convert it to a <strong>Clipping Mask<\/strong> for a cohesive look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-097.jpg\" alt=\"Adding a rounded rectangle detail\" width=\"550\" height=\"647\"><\/figure>\n<h3>Step 56<\/h3>\n<p>Create new Character Styles tailored for the blog post metadata to ensure readability and visual consistency.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-098.jpg\" alt=\"Creating Character Styles for metadata\" width=\"500\" height=\"378\"><\/figure>\n<h3>Step 57<\/h3>\n<p>Position the metadata text atop the previously designed shape and implement the freshly established Character Styles for a coherent look across the blog post.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-099.jpg\" alt=\"Adding metadata text\" width=\"380\" height=\"353\"><\/figure>\n<h3>Step 58<\/h3>\n<p>Use the <strong>Type<\/strong> tool to create a text box aligned with the width of 4 columns. Fill the box with placeholder text by selecting <strong>Type &gt; Paste Lorem Ipsum<\/strong>, which uses Photoshop\u2019s built-in function to generate dummy text.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-100.jpg\" alt=\"Creating text box for content\" width=\"500\" height=\"630\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-101.jpg\" alt=\"Filling text box with Lorem Ipsum\" width=\"351\" height=\"404\"><\/figure>\n<h3>Step 59<\/h3>\n<p>Create a new Paragraph Style for the blog post content to enhance the readability and aesthetic of the text. Initiate this by selecting the new icon in the Paragraph Styles panel.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-102.jpg\" alt=\"Creating new Paragraph Style\" width=\"259\" height=\"258\"><\/figure>\n<p>Configure the Paragraph Style with the specific settings provided to align with the blog\u2019s design standards.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-103.jpg\" alt=\"Configuring Paragraph Style settings\" width=\"500\" height=\"375\"><\/figure>\n<h3>Step 60<\/h3>\n<p>Apply the newly created Paragraph Style to the main body of the post content, tweaking Indent and Spacing settings as necessary for optimal layout and readability. For web design purposes, it\u2019s advisable to turn off Hyphenation to maintain clean text flow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-104.jpg\" alt=\"Applying Paragraph Style to content\" width=\"550\" height=\"394\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-105.jpg\" alt=\"Deactivating hyphenation\" width=\"500\" height=\"384\"><\/figure>\n<h3>Step 61<\/h3>\n<p>Draw a rounded rectangle to serve as an additional decorative element, filling it with <strong>#8e8380<\/strong> and opting for <strong>no Stroke<\/strong>. Accentuate this shape with a <strong>Pattern Overlay<\/strong> Layer Style, employing the same pattern used in the slider section for visual harmony.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-106.jpg\" alt=\"Drawing rounded rectangle for decoration\" width=\"418\" height=\"266\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-107.jpg\" alt=\"Applying pattern overlay to rounded rectangle\" width=\"550\" height=\"354\"><\/figure>\n<h3>Step 62<\/h3>\n<p>Create a label for a button and save this text styling as a new Character Style for consistency and ease of use across other buttons in the design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-108.jpg\" alt=\"Adding button label\" width=\"500\" height=\"191\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-109.jpg\" alt=\"Saving button label as Character Style\" width=\"550\" height=\"359\"><\/figure>\n<h3>Step 63<\/h3>\n<p>Duplicate the previously designed button and modify its color to <strong>#f76b6a<\/strong> for a hover or active state representation. Additionally, adjust the label\u2019s font to bold to distinguish the button\u2019s state.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-110.jpg\" alt=\"Duplicating and styling button for active state\" width=\"455\" height=\"304\"><\/figure>\n<h3>Step 64<\/h3>\n<p>Group the blog post elements and duplicate them using <span class=\"key\">Ctrl<\/span> + <span class=\"key\">J<\/span>. Then, use <span class=\"key\">Alt<\/span>-drag to replicate the group for multiple posts, ensuring to update the image and title for each to maintain variety.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-111.jpg\" alt=\"Duplicating blog post group\" width=\"500\" height=\"725\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-112.jpg\" alt=\"Creating multiple blog posts\" width=\"500\" height=\"512\"><\/figure>\n<h3>Step 65<\/h3>\n<p>Replicate the <strong>Read More<\/strong> button and adjust its label to a number, intending to use these for page navigation. Ensure to designate one button to represent the hover state for visual feedback.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-113.jpg\" alt=\"Preparing buttons for page navigation\" width=\"550\" height=\"259\"><\/figure>\n<h3>Step 66: Footer<\/h3>\n<p>Begin crafting the footer by adding widget titles and their descriptions, laying the foundation for this important site section.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-114.jpg\" alt=\"Adding widget title and description in footer\" width=\"457\" height=\"508\"><\/figure>\n<h3>Step 67<\/h3>\n<p>Add links within the footer and underline each with a 1 px line for clarity and emphasis. Use <strong>no Fill<\/strong> and a <strong>Stroke<\/strong> color of <strong>#8e8380<\/strong> to match the site\u2019s design aesthetic.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-115.jpg\" alt=\"Adding links and underlines in footer\" width=\"550\" height=\"321\"><\/figure>\n<h3>Step 68<\/h3>\n<p>Access the <strong>More Options<\/strong> button and choose a <strong>dashed line<\/strong> style to create a visually distinctive separator for the footer content.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-116.jpg\" alt=\"Selecting More Options for dashed line\" width=\"550\" height=\"549\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-117.jpg\" alt=\"Choosing dashed line style\" width=\"429\" height=\"229\"><\/figure>\n<h3>Step 69<\/h3>\n<p>Enhance the widget by adding additional links, further expanding the footer\u2019s functionality and navigation options.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-118.jpg\" alt=\"Adding more links to widget\" width=\"381\" height=\"848\"><\/figure>\n<h3>Step 70<\/h3>\n<p>Replicate the widget to utilize the design across different sections of the footer, creating a unified and structured appearance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-119.jpg\" alt=\"Duplicating the widget\" width=\"600\" height=\"790\"><\/figure>\n<h3>Step 71<\/h3>\n<p>Indicate a hover state for the links by setting one of the link\u2019s text to bold, mirroring the active menu item\u2019s style from the main navigation bar. Directly below this active link, draw a 5 px line colored <strong>#f76b6a<\/strong>, ensuring consistency with the design\u2019s active state indicators.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-120.jpg\" alt=\"Setting link to bold for hover state\" width=\"424\" height=\"379\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-121.jpg\" alt=\"Adding line under active link\" width=\"550\" height=\"276\"><\/figure>\n<h3>Step 72<\/h3>\n<p>At the footer\u2019s lower section, introduce another rectangle with a <strong>Fill<\/strong> of <strong>#3d3123<\/strong>, adding depth and visual interest to the page\u2019s bottom edge.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-122.jpg\" alt=\"Adding rectangle to footer's lower area\" width=\"500\" height=\"466\"><\/figure>\n<h2>Finalizing Footer Information<\/h2>\n<h3>Step 73<\/h3>\n<p>Utilize the <strong>Type<\/strong> tool to insert the footer information. Enhance its visibility against the background by applying a dark <strong>Drop Shadow<\/strong>, creating necessary contrast for readability.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-123.jpg\" alt=\"Adding footer information\" width=\"500\" height=\"385\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-124.jpg\" alt=\"Applying drop shadow to footer info\" width=\"550\" height=\"360\"><\/figure>\n<h2>Integrating Social Media<\/h2>\n<h3>Step 74<\/h3>\n<p>Incorporate <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webfx.com\/blog\/web-design\/free-social-media-icons-for-designers-a-life-in-pixels\/\">social media icons<\/a> provided by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.danieleselvitella.com\/\">Daniele Selvitella<\/a> to connect your site more closely with your social platforms. Enhance these icons with an <strong>Outer Glow<\/strong> from the Layer Styles for added visual appeal.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-125.jpg\" alt=\"Adding social media icons\" width=\"477\" height=\"249\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-126.jpg\" alt=\"Applying Outer Glow to icons\" width=\"550\" height=\"355\"><\/figure>\n<h3>Step 75<\/h3>\n<p>Adjust the opacity of the normal state icons to <strong>50%<\/strong> to distinguish them from their active or hover state, which should remain at <strong>100%<\/strong> opacity for clarity and user interaction feedback.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-127.jpg\" alt=\"Adjusting icon opacity for normal and hover states\" width=\"399\" height=\"318\"><\/figure>\n<h3>Step 76<\/h3>\n<p>Enhance interactive elements by adding a freehand cursor icon over active or hover links, indicating to users where interaction can occur. This subtle cue contributes to a more intuitive navigation experience.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-128.jpg\" alt=\"Adding cursor icon for active link\" width=\"265\" height=\"122\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-129.jpg\" alt=\"Detail of cursor icon\" width=\"265\" height=\"182\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-130.jpg\" alt=\"Hover state cursor icon\" width=\"265\" height=\"224\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-131.jpg\" alt=\"Cursor icon placement\" width=\"265\" height=\"139\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-132.jpg\" alt=\"Final look with cursor icon\" width=\"265\" height=\"214\"><\/figure>\n<h3>Final Result<\/h3>\n<p>Here is the culmination of our work. The latest version of Photoshop introduces some powerful tools specifically useful for web layout design. The inclusion of Character Styles and Paragraph Styles marks a significant advancement for web designers, streamlining the design process and ensuring consistency across the project.<\/p>\n<p><a href=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/demo\/final-large.jpg\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/ps-cs6-blog-layout\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/final.jpg\" alt=\"Final web layout design in Photoshop\" width=\"600\" height=\"1148\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>In this guide, I\u2019ll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop. You\u2019ll learn how to efficiently use Character Styles and Paragraph Styles to simplify your design process. Before starting, ensure you have these resources at your disposal: Free Font Sansation&hellip;<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[43],"tags":[3579,1933,1938],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Designing a Clean and Elegant Blog Layout with Photoshop - Hongkiat<\/title>\n<meta name=\"description\" content=\"In this guide, I&#039;ll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing a Clean and Elegant Blog Layout with Photoshop\" \/>\n<meta property=\"og:description\" content=\"In this guide, I&#039;ll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-27T15:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-08T10:20:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg\" \/>\n<meta name=\"author\" content=\"Mohammad Jeprie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohammad Jeprie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"39 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/\"},\"author\":{\"name\":\"Mohammad Jeprie\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\"},\"headline\":\"Designing a Clean and Elegant Blog Layout with Photoshop\",\"datePublished\":\"2012-09-27T15:01:15+00:00\",\"dateModified\":\"2024-04-08T10:20:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/\"},\"wordCount\":2813,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blog-layout-in-photoshop-cs6\\\/design-an-elegant-blog-in-psd-cs6-001.jpg\",\"keywords\":[\"Photoshop\",\"Photoshop Tutorials\",\"Photoshop UI effects\"],\"articleSection\":[\"Photoshop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/\",\"name\":\"Designing a Clean and Elegant Blog Layout with Photoshop - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blog-layout-in-photoshop-cs6\\\/design-an-elegant-blog-in-psd-cs6-001.jpg\",\"datePublished\":\"2012-09-27T15:01:15+00:00\",\"dateModified\":\"2024-04-08T10:20:35+00:00\",\"description\":\"In this guide, I'll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blog-layout-in-photoshop-cs6\\\/design-an-elegant-blog-in-psd-cs6-001.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blog-layout-in-photoshop-cs6\\\/design-an-elegant-blog-in-psd-cs6-001.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blog-layout-in-photoshop-cs6\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing a Clean and Elegant Blog Layout with Photoshop\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\",\"name\":\"Mohammad Jeprie\",\"description\":\"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/mohammadjeprie\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing a Clean and Elegant Blog Layout with Photoshop - Hongkiat","description":"In this guide, I'll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/","og_locale":"en_US","og_type":"article","og_title":"Designing a Clean and Elegant Blog Layout with Photoshop","og_description":"In this guide, I'll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.","og_url":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-09-27T15:01:15+00:00","article_modified_time":"2024-04-08T10:20:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg","type":"","width":"","height":""}],"author":"Mohammad Jeprie","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Mohammad Jeprie","Est. reading time":"39 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/"},"author":{"name":"Mohammad Jeprie","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2"},"headline":"Designing a Clean and Elegant Blog Layout with Photoshop","datePublished":"2012-09-27T15:01:15+00:00","dateModified":"2024-04-08T10:20:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/"},"wordCount":2813,"commentCount":14,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg","keywords":["Photoshop","Photoshop Tutorials","Photoshop UI effects"],"articleSection":["Photoshop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/","url":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/","name":"Designing a Clean and Elegant Blog Layout with Photoshop - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg","datePublished":"2012-09-27T15:01:15+00:00","dateModified":"2024-04-08T10:20:35+00:00","description":"In this guide, I'll walk you through the steps to create a minimalist and refined blog design utilizing the power of the latest version of Photoshop.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/blog-layout-in-photoshop-cs6\/design-an-elegant-blog-in-psd-cs6-001.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designing a Clean and Elegant Blog Layout with Photoshop"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2","name":"Mohammad Jeprie","description":"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.","url":"https:\/\/www.hongkiat.com\/blog\/author\/mohammadjeprie\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Uz","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15039"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15039\/revisions"}],"predecessor-version":[{"id":71688,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15039\/revisions\/71688"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15039"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}