{"id":1200,"date":"2007-11-02T19:00:36","date_gmt":"2007-11-03T00:00:36","guid":{"rendered":"http:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header"},"modified":"2012-10-23T10:47:14","modified_gmt":"2012-10-23T14:47:14","slug":"recreate-the-diggcom-header","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header","title":{"rendered":"Recreate the Digg.com Header"},"content":{"rendered":"<p>This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.<\/p>\n<p>Start off with a new document 900&#215;125 with # e5ecf3 as your background color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-01.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Select #e5ecf3 as your foreground color and press CTRL+Backspace to fill the background with the blue\/grey color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-02.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create a new layer. Select the Rounded Rectangle tool with the following settings.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-03.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Set your foreground color to # 1b5790 and draw the rounded rectangle. Draw from the bottom up so the top part of the Rounded Rectangle gets cut off.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-04.jpg' alt='http:\/\/www.1001fonts.com\/font_details.html?font_id=2580' \/><\/p>\n<p>Now hold down the CTRL key and click on the layer with the Rounded Rectangle in the Layers Palette.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-05.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>This will select the rectangle you just drew. Now, Using the Marquee tool, hold down the ALT key and drag the mouse over the top section like below.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-06.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>When you let go you should have a selection like the one below.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-07.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now you will need to <a href=\"http:\/\/www.1001fonts.com\/font_details.html?font_id=2580\">download the FFF Forward font<\/a>. Add the dig logo using the text tool bar and FFF Forward 21pt sharp as your font. The color should be white (#FFFFFF).<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-08.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Using the text tool again add the \u201cJoin Digg\u201d, \u201cAbout\u201d and \u201cLogin\u201d links. The font I used was Arial Bold 14pt and the color is #d2dcf3.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-09.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create a new layer and draw a 1 pixel line between the links using the same color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-10.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Select the layer with the lines and adjust the opacity to 40%.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-11.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>They should look lighter now.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-12.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create another new layer. Draw a white (#FFFFF) rounded rectangle with a 4px radis where the \u201cAll Stories\u201d link will go. Add the word all using Arial 14pt Bold with #879c6f as the color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-13.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Add the Section links using the same font with #325b0a as the color. Be sure to leave enough space between the words for the arrows.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-14.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now add the arrows. Select the custom shape tool and load the arrows.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-15.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create a new layer. Select the second arrow in the top row and use #799c4a as your foreground color. Draw an arrow.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-16.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now rotate it 90 degrees clockwise.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-17.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Should look like this.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-18.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now right click on the layer in the layers pallet and duplicate it 2 times.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-19.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Then select each layer and position the arrow. Then draw another 1px line in the same green color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-20.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p><!--nextpage--> <\/p>\n<p>Now we will add the \u201cPopular\u201d and \u201cupcoming\u201d buttons. Create a new layer and draw a Rounded Rectangle with a 4px radius like below.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-21.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>CTRL + Click on the layer in the layers pallet to select it. Using the marquee tool hold down the alt key and select half of the rectangle. Then select the move tool and press the left arrow to move the selection.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-22.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now select the other rectangle. I use the magic wand to do this. Fill the selection with #d0e5ad.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-23.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Using the text tool with the same Arial 14pt Bold font with # 325b0a as the color type the words \u201cPopular and \u201cUpcoming\u201d.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-24.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create another new layer and draw a white rectangle for the search box.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-25.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Select the circle marquee tool. Hold down the shift button to make a perfect circle and make a selection like below. Then press the delete key to delete that part of the box.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-26.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create a new layer and make another slightly smaller circle and fill it with # 92afcd<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-27.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Create a new layer. Draw another small circle inside that one and fill it with # e1ebf4.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-28.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>On the menu go to Edit > Stroke.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-29.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now add a 1px stoke using the # 1b5790 color to the outside.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-30.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Once you have the stroke, use the line tool to add the handle to the magnifying glass and the finished button should look like this.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-31.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>Now add the \u201cSearch Digg\u2026\u201d text using Arial 14pt Regular with #676767 as your color.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-32.jpg' alt='Digg Header Photoshop Tutorial' \/><\/p>\n<p>It looks pretty good. All you need to do is add the RSS button and the category links and you should have something like this.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-33.jpg' alt='http:\/\/www.1001fonts.com\/font_details.html?font_id=2580' \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,11],"tags":[40,43,41,39,42],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Recreate the Digg.com Header<\/title>\n<meta name=\"description\" content=\"This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header\" \/>\n<link rel=\"next\" href=\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header\/2\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#webpage\",\"url\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header\",\"name\":\"Recreate the Digg.com Header\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#primaryimage\"},\"datePublished\":\"2007-11-03T00:00:36+00:00\",\"dateModified\":\"2012-10-23T14:47:14+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Recreate the Digg.com Header","description":"This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.","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:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header","next":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header\/2","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/digg-header-photoshop-tutorial-01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#webpage","url":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header","name":"Recreate the Digg.com Header","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#primaryimage"},"datePublished":"2007-11-03T00:00:36+00:00","dateModified":"2012-10-23T14:47:14+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"This tutorial will show you how to create a website header similar to the on use on the social book marking site digg.com. I will be using Adobe Photoshop CS3 for this tutorial.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/photoshop-tutorials\/recreate-the-diggcom-header#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1200"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1200\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}