Design a Clean Portfolio Site in Photoshop. Get the FlatPix UI Kit for only $7 - Learn More or Buy Now Today we will be working through the process of designing a portfolio site layout in Photoshop. The tutorial will break down each step of the process, and you can download the PSD file from Folio Focus if you are interested. The End Result: Here is a look at what we will be designing in this tutorial (click on the image to see it in full size). This post is supported by SnobbySlice. Getting Started: The New File The first thing you need to do is create a new file (File – New) that is 1600 pixels wide and 950 pixels high. Step 1: The Background Start by using the paint bucket tool to give the background layer a color of #b1a38d. To set the boundaries for some other areas of the layout, set new horizontal guides (View – New Guide) at 120 pixels, 150 pixels, 190 pixels, and 320 pixels. Add a new layer (Layer – New) and use the rectangular marquee tool to select everything above the horizontal guide at 120 pixels.
Step 2: The Header. Design a Modern and Sleek Web Design Mockup in Photoshop plus a. In this tutorial you’ll be learning several techniques on how to design a modern and stylish web design mock-up ready to be coded into xHTML. The purpose of the mock-up is aimed at a company or individual who offer services, such as a designer or photographer. There is plenty of nice, clean space to present your content, followed by a smooth scroller to present some of your latest work. If you’re here for the free template mock-up, don’t worry, I haven’t forgot!
You can download the .PSD right here! If you code it up in xHTML and CSS, please let me know – I’d love to see how it turns out! Step 1: Setting up your document. Open up Photoshop and make a new RGB document for the web; I used the document size 1280×1024 pixels. Step 2: Laying out the page. Make a new layer and select the Rectangular Marquee Tool. Repeat the step again, this time setting the height of your marquee tool to 250px. Step 3: Adding blending modes to your boxes. Step 4: Adding some scrollers. That’s it! Create a Clean and Classy Web Design in Photoshop. In this web design tutorial, you will learn how to create an elegant and professional web layout that can be used as a web portfolio site. We will use various Photoshop techniques, relying on basic tools such as shape tools and layer styles that will result in a usable web design. As a bonus, we have included a working HTML/CSS/JavaScript web template that you can download and use in any way that you like, free of charge!
Preview Click on the image below to see the web design mock-up in full scale. Working Demo Click on the image below to see the working demonstration (which you can download at the bottom of this tutorial). Resources Step 1: Set up the Photoshop document The first thing we need to do is create a new Photoshop document to work with.
Step 2: Make the navigation bar background We want to start at the header and then work our way down to our footer. Step 3: Stylize the navigation bar background Then change this layer’s blend mode to Overlay and lower the opacity to around 23%. Six Revisions - Web Development and Design Information. How to Create a “Worn Paper” Web Layout Using Photoshop. In this tutorial, you’ll learn how to create a textured "worn paper" web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy.
Final Result Click on the image to view the full-scale final result. Downloads You can download the associated source files of this tutorial below. worn_paper_web_layout.zip (ZIP, 6.38 MB) Setting up the Photoshop document 1 The first thing we want to do is create a new document with the dimensions of 1024px x 1050px. Setting up the background 2 Next, choose your Paint Bucket Tool (G) from your Tools pallete and fill the Background layer with #F9E9BB. 3 Now we want to add a stock photo to our background. Creating the main navigation 4 Next, we’ll work on our navigation. 5 Now, this part is a bit tricky. 6 Lower the opacity of that layer to 85% so the background will fade through a bit. 8 Let’s work on displaying the active/mouseover link. Designing the RSS feed link The Logo. Create a Winter Theme Web Design in Photoshop. In this web design tutorial, you will learn how to create a winter blog layout in Photoshop. We will use a photo of a forest for the background and then blur areas of that photo to create other elements like the logo and the navigation bar.
Preview Click on image to see full size. Tutorial info Setting up the Photoshop document 1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image. Grid settings 2 Open the Preferences window (Ctrl/Cmd + K), click on "Guides, Grid & Slices" and use the settings from the following image for the grid. Creating the content background 3 Create a new layer and set your foreground color to white. Adding guides 4 Make sure that the Rulers are activated by going to View > Rulers and making sure there is a check on the left (Ctrl/Cmd + R to toggle the visibility of your Rulers), then click on the one from the top and drag a guide towards the top edge of your content background. Adding a winter photo in the header 18. Final Result. How to Create a Clean Web 2.0 Style Web Design in Photoshop. In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout.
You’ll be using some basic to intermediate-level techniques to build your very own sleek "Web 2.0" style web design that uses the 960 Grid System. This is a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design. Final Result Clicking on the image below will take you to the full-scale version of the web layout that we’ll be designing in this tutorial. Setting up the document 1 Create a new document in Photoshop with the dimensions 1200px x 1050px. Creating the background 2 Now, we will be creating the background. Placing the Grid System into the document 3 On a new layer, create a 960px wide grid – 12 bars, each bar at 60px wide.
Making containers for the logo and navigation items 4 We will now be creating the containers for the logo and the navigation items. 9 Duplicate the separator. Create a Slick and Minimalist Web Layout in Photoshop. In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout.
Preview Here’s a preview of what we’ll be creating together, click the image to enlarge. Create a new Photoshop document 1 We’ll be using the 960 Grid System (download it at as a starting template. Once downloaded, ppen up the file called 960_grid_12_col.psd and then hide the group called 12_col_grid. Creating the background 2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. 3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Designing the header section 4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. "YourName" "some awesome slogan" Creating our navigation Creating the search bar.
Best Practices for Hints and Validation in Web Forms. Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time. Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart. Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form. Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts.
And in some cases, we can make forms that people might even enjoy filling out. Hints in Web Forms Validation is frequently used to provide users with a response on what information they should have entered when an error occurs. Information available prior to submission can come in three forms: Alignment of Labels The Good. 10 Simple Tips for Launching a Website. The process of launching a website can be a daunting endeavor. There are many things you want to do, but not enough time and resources to do them. However, even though it might seem like a herculean task, as long as you keep some fundamental things in mind, you can ensure a hassle-free website launch. In this article, I’ll share with you some tips for launching a website based on the experience of our own launch of Design Instruct. This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions.
Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week. 1. Don’t risk having your website crash and your launch day ruined because of a shoddy web server. 2. Nowadays, social networking is integral to a website. 3. 4. 5. The Ingredients of a Successful Website. The first published article on Six Revisions was about the things you need for a web project to succeed. Two years later, the site has reached a point that I would consider "successful". The definition of "success" is different to everyone. To me, I define success as having a large audience that consists of readers from all over the globe that love and enjoy your work as much as you do. In this article, I would like to reflect and share with you the things I consider to be the ingredients of our recipe for success and growth.
This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. Unyielding passion for your work Growing a web project takes time and dedication. A strong knowledge about your subject Whether you’re building an email app that will revolutionize the way people do emails or a web publication about baking cookies, you have to know your subject inside and out. Talented people Partners that complement your skills Taking risks. How to Make Remote Team Collaboration Work. It’s often said that the world is getting smaller. Of course, it’s not physically getting smaller, but rather, that statement alludes to the fact that the distances that used to separate people are more manageable today because of the improvements in communication and travel. This could not be truer on the Internet where communication is instantaneous.
A letter that would have taken days to arrive could be read and replied to within minutes via email. Documents that would otherwise take days to arrive, now only take a few milliseconds. Of course, working on the Internet is not without its drawbacks. This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. The Case: Design Instruct Design Instruct is our first real venture together. It was also the first time we actually started working together. There are many challenges associated with working with someone over a long distance. Problem #1: Staying in sync Problem #2: Task management. Best Practices To Develop Perfect Websites for iPhone and Mobile. The Death of Tag Clouds. Designing User Interfaces For Business Web Applications - Smashi.
Advertisement Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers. This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects. So, we will cover the basics of user interface design for business Web applications. Websites vs. Confusing Web applications and websites is easy, as is confusing user interface design and website design. A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality).
Sketching. Color Scheme Designer 3.
404 Error pages. Twilio Cloud Communications: Web Service API for building Voice. Miniapp: Hacker Newspaper. In 2008 I took on one of the worst jobs of my life, at a major metropolitan newspaper in Southern California. My managers were inept. One of them was a two-faced political schemer. The other one was spotted at 10am carrying a bottle of Jack Daniels the size of a small child.
Not only that, I had actually been working with this particular manager for over three months before I realized they were a manager at all. The environment was if anything even more dysfunctional than you would expect of a dying industry. So when I see the hate that newspapers get from certain corners of the Web, I understand. And the baby is kind of beautiful. The typography and layout of a newspaper add a complex, structured hierarchy to the information in the text and photographs. Let's geek out on this sucker and turn it into an outline. Compare that to Hacker News. DiggBarGeolocation DBTC TabletNeural networksSorting algorithmsPowerCleantech/VCTC TabletDiggBar It's faster, too.
Update: Hacker Newspaper's on GitHub. Jonathan Mendez's Blog: New York Times Landing Pages: All the Ir. I’ve often used my hometown paper, The New York Times, to exemplify the disconnect between digital publisher content strategy, the goals of visitors and the resultant impact on advertising. The root of this disconnect is the way search, social media and the landing experience fracture content hierarchies. Behavior has changed and so too must the content experience. Let’s face it, taking the 300 year old idea of a newspaper and essentially throwing it on the web while likely the only option 13 years ago is not optimal one for anyone today. So why has the optimization needle moved so little in the right direction? Huge amounts of traffic to NYT.com bypass the homepage.
With the growth of search, the opening of the Times content archive and the rise of Social Media, success for the Times, its advertisers and most importantly its visitors, relies on the quality of the landing experience. The current NYT landing experience is quite simply dreadful. New York Times Landing Page Irrelevance Space: Typogridphy — A Typographical and Grid Layout CSS Framework From.