Create website homepage with Photoshop (1): Homepage main body production

Making website homepage with Photoshop (1): Homepage main body production Author: Xue Xin Source: xuexin.com
This tutorial is a series of tutorials, mainly explaining how to use photoshop to make a website homepage.
Chapter 1 Lecture on making the main part of the homepage

　Course Overview

In this course, friends will learn the following:

　•• How to design the website homepage through Photoshop CS3 Layout design

　•• Design techniques and methods for various web page layout elements

　•• How to cut web pages and set the attributes of slices

　•• How to create FLV videos integrated with Flash

　•• Using the “Spry Tab” widget in Dreamweaver CS3

　•• Collaboration between Photoshop, Flash and Dreamweaver

Lecture 1: Making the Main Part of the Home Page

This article takes the homepage of the “Stone Bridge Garden” website as an example to demonstrate the entire process of page creation. process. In fact, “Stone Bridge Garden” does not exist, and the author did not fictionalize it just to complete this example. I have always longed to live in a quiet and elegant place. Although “Stone Bridge Garden” is very different from my original intention, it is still somewhat different. Can you express some of my thoughts?

Returning to the main topic, early web page design was generally centered on Dreamweaver, with software such as Photoshop or Flash providing various materials, such as pictures, animations, text, etc. Since the emergence of Photoshop’s “cutting” and other functions customized for web design, the center of design has slowly shifted to Photoshop. Because the image-based nature of Photoshop determines that it can exert more precise control over the layout, making the web pages more flexible and vivid, this almost completely liberates the creative inspiration of web designers and is no longer subject to Constrained by the square web form. Now what we want to make is the main part of the “Stone Bridge Garden” homepage. The main part includes the title, main display image and navigation bar.

　1. Open Photoshop CS3 and execute the menu “File > New”. In the new dialog box, set the name to “Stone Bridge Garden”, the width to “777”, and the height to “800”. This number is not “official”, it is just what I tested in my daily work. For web pages, it is generally only used for screen display, so the resolution is “72”, the color mode is “RGB color”, and other parameters remain default.

　2. Press Ctrl A to select all pages, and execute the menu “Edit > Fill” to fill the page with solid black. Select the vector “Rectangle Tool” in the toolbox and draw a rectangle A as shown in Figure 1-1-1. Then use the white “Direct Selection Tool” to distort the vector shape to look like B in Figure 1-1-1. The shape’s hexadecimal color value is “#246b34”, a thick dark green.

Figure 1-1- 1

　3. Use the horizontal text tool to enter the words “Shiqiao Garden” in the font “Founder Popular Simplified Chinese”. Then enter “ShiQiaoGarden”, the font is “Bickham Script Pro”, the font size is “30 points”, and the text is laid out as shown in Figure 1-1-2.

Figure 1-1- 2
4. This is a raw material of flowers taken from Longting. It uses macro and a large aperture of 2.8 to achieve a shallow depth of field background blur effect. Readers can use the blur tool or lens blur filter. Achieve similar effects, as shown in Figure 1-1-3.

Figure 1-1- 3
5. We perform simple processing on the picture, execute the menu “Image > Adjustment > Levels”, and adjust the positions of the black and white sliders from both sides to the middle to make the main body of the picture more prominent and more appealing. . The original material itself is 16:9 widescreen. We use the selection tool and the delete key to perform appropriate cropping, as shown in Figure 1-1-4.

Figure 1-1-4
5. In order to increase the modernity and fashion of the flowers, we further process the pictures, find a picture at random, and execute the menu “Filter > Pixelate”> Mosaic”, increase the value to produce a mosaic effect of large color blocks. Then use the material or make a distorted grid yourself. These are the materials to be synthesized, as shown in Figure 1-1-5.

Figure 1-1-5

6. Now there are three layers of pictures: grid, flower and mosaic. The grid is placed on the top layer and the blending mode of the layer is set to “Color” “Burn” and the opacity is set to “68%”. The blending mode of the flower layer is set to “Hard Light” and the mosaic layer remains unchanged. The composite effect of the three is shown in Figure 1-1-6.

Figure 1-1-6

7. The next thing to be made is the navigation bar part of the homepage. Use the vector “Rectangle Tool” to draw a rectangle. Be careful not to fill the rectangle completely. Leave some black edges around it. The black edges are narrow at the top and thick at the bottom. It has a certain sense of hierarchy. The hexadecimal color value is “#c8fcc5”, a light green, as shown in Figure 1-1-7. >
Figure 1-1-7
8. Use the horizontal text tool to enter the navigation bar The text on is decorated with braces “{}”, the font is “Founder Xiaobiao Song_GBK”, and the anti-aliasing method is “Thick”, as shown in Figure 1-1-8. The navigation created here only serves as a placeholder. The flip effect of the navigation bar button will be set in the following tutorials.