Tutorial regarding Assignment 2 (Photoshop)
I'm using the Adobe Photoshop CS4 to design my blog. So those who are using the previous version still can apply these tutorials as well. Enjoy designing your blog...
~ TASK 1 ~
How to design the blog header:
~ TASK 1 ~
How to design the blog header:
1) File -> New -> Name it Page 1
2) Set the width to 950 pixels and heights to 170 pixels (The width and height may be different according to your template setting)
3) Choose RGB colour with 8 bit
4) Layer -> New Fill Layer -> Solid Color
5) Choose color none
6) Pick the solid color by clicking the area of color wanted
7) Create the second page by repeating steps no. 1-6 with the name Page 2. For step no. 4, the New Fill Layer will be Gradient. You can change the style of the Gradient too
8) Choose the gradient color by clicking the area of colour wanted as step no. 6. Pick different colour so it will be contra with the Page 1
9) Use rectangular marquee tool to select the area that need to marquee. Don't marquee all the page.
- Example of the selected marquee:
10) Select -> Modify -> Feather ( To create soft edges)
11) Set the pixels to 15
12) Use move tool and drag the selected marquee area to overlap with the Page 1. Alternatively, press Shift+Ctrl+C to copy the marquee area and Ctrl+V to paste it on the Page 1
13) Use transform tool to adjust the dragged layer (Ctrl+T). Adjust the layer till it form a frame like below.
14) Use the eyedropper to extract color for the text font
15) Go to Color -> Swatches at the right bar of the window to extract the color. Choose white color
16) Use brush tools to draw some design on the layer. The size and stlye of the brush can be adjusted accordingly at the window above
16) After finished drawing, add some pictures into the layer
17) File -> Open -> Location of the photo -> Click -> Open
18) Use Lasso tool to cut the picture out and paste into the previous layer
19) Select -> Modify -> Feather ( To create soft edges)
19) Select -> Modify -> Feather ( To create soft edges)
20) Set the pixels to 15
21) Use move tool and drag the selected marquee area to overlap with the previous layer. Alternatively, press Shift+Ctrl+C to copy the marquee area and Ctrl+V to paste it on the Page 1
22) Use horizontal text tool to type in some words. You may adjust the font type and size accordingly.
23) To add in effect to the words, use the warped text at window above.
24) Finally, go Layer -> Flatten image
24) Finally, go Layer -> Flatten image
25) File -> Save As -> File name with JPEG extension
How to apply the header into the blog:
1) Go to Dashboard -> Layout -> Page Elements -> Header (Mine is KK01003 - Multimedia System). Click edit at the right under your header
2) Choose the file of the header you have designed and location where it saved. Wait for few minutes for it to finish upload
3) View the blog and repair any flaw such as the header alignment. You can go to Dashboard -> Layout -> Page Element -> Edit HTML to the repair
4) From there, change the pixel of the blog header. Find the code which begin like this:
#header-wrapper { position: relative; width:100%; height:290px; padding: 0px 0px 0px 0px; margin: 0px 0px -21px 0px; background: $headerbgColor;
5) Change the width and height (red highlighted) according to your created header pixels. Click save template and view the blog again for the changes made
How to apply the designed background into the blog:
1) Go to Dashboard -> Layout -> Page Element -> Edit HTML to the change the background
2) From there, change the URL of your blog background. Find the code which begin like this:
body { margin: 0; text-align: center; min-width; 950px; background: $mainbgColor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurPlqON8Dgro5Qgwy7EBFkPILh4tfudP6ONbZRT61pqKAPIHfbH2MG2gsRBEGTBLsNLaJ8Aw4344msTykWUMY0aaWEfj3GGgGQ1qzL5eT33NOVmNbKUoW0hkB3wxb4B42JyTJY03-ciFX/s512/Background.jpg); background-position: center;
3) Change the URL (red highlighted) of where you have uploaded your designed blog background. Click save template and view the blog again for the changes made
~ TASK 2 ~
How to design the wallpaper:
4) From there, change the pixel of the blog header. Find the code which begin like this:
#header-wrapper { position: relative; width:100%; height:290px; padding: 0px 0px 0px 0px; margin: 0px 0px -21px 0px; background: $headerbgColor;
5) Change the width and height (red highlighted) according to your created header pixels. Click save template and view the blog again for the changes made
How to apply the designed background into the blog:
1) Go to Dashboard -> Layout -> Page Element -> Edit HTML to the change the background
2) From there, change the URL of your blog background. Find the code which begin like this:
body { margin: 0; text-align: center; min-width; 950px; background: $mainbgColor url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurPlqON8Dgro5Qgwy7EBFkPILh4tfudP6ONbZRT61pqKAPIHfbH2MG2gsRBEGTBLsNLaJ8Aw4344msTykWUMY0aaWEfj3GGgGQ1qzL5eT33NOVmNbKUoW0hkB3wxb4B42JyTJY03-ciFX/s512/Background.jpg); background-position: center;
3) Change the URL (red highlighted) of where you have uploaded your designed blog background. Click save template and view the blog again for the changes made
~ TASK 2 ~
How to design the wallpaper:
1) File -> New -> Name it Page 1
2) Set the width to 640 pixels and heights to 240 pixels
3) Choose RGB colour with 8 bit
4) Layer -> New Fill Layer -> Gradient Color
5) Choose color none. Pick the gradient color by clicking the area of color wanted. Choose black color
6) Choose the style of the gradient to become reflected
7) Create the second page by repeating steps no. 1-3 with the name Page 2
- Example of the reflected gradient background:
7) Create the second page by repeating steps no. 1-3 with the name Page 2
8) Use eyedropper to choose the color from swatches.
9) Then use brushes to colored the empty page. You can use your own brush style and color. Pick the different colour so it will be contra with the Page 1
9) Then use brushes to colored the empty page. You can use your own brush style and color. Pick the different colour so it will be contra with the Page 1
10) Use the eyedropper again to extract color to white from the swatches. Then use brush tools to draw some design on the layer also. The size and style of the brush can be adjusted accordingly at the window above
11) Use rectangular marquee tool to select the area that need to marquee. Don't marquee all the page.
12) Select -> Modify -> Feather ( To create soft edges)
13) Set the pixels to 15
14) Use move tool and drag the selected marquee area to overlap with the Page 1. Alternatively, press Shift+Ctrl+C to copy the marquee area and Ctrl+V to paste it on the Page 1
15) Use transform tool to adjust the dragged layer (Ctrl+T). Adjust the layer till it form a frame like below
16) After finished drawing and merge two layer, add some pictures into the merged layer
17) File -> Open -> Location of the photo -> Click -> Open
18) Use the marquee tool to cut the picture out and paste into the previous merged layer
19) Select -> Modify -> Feather ( To create soft edges)
20) Set the pixels to 15
21) Use move tool and drag the selected marquee area to overlap with the previous merged layer. Alternatively, press Ctrl+C to copy the marquee area and Ctrl+V to paste it on the previous page
22) Set the opacity of the first picture to 35% so that it will be partially invisible
23) Next, use the magic wand to select the the wanted part of the picture, for e.g. the teddy bear. Adjust the opacity to 50% so it will be more visible than previous picture. Use move tool and drag the selected magic wand area to overlap with the previous page. Alternatively, press Ctrl+C to copy the wand area and Ctrl+V to paste it on the previous page
24) Finally, go Layer -> Flatten image
25) File -> Save As -> File name with JPEG extension
