Facebook加入
LINE加入
2021/12/25
Photoshop設計教程：個人筆記本電腦的廣告設計
這一次的教學是屬於PS教程領域中的設計教程的相關教學。
文章出處是來自Iconfans的PS教程類文章，寫教學的作者是a632172403，感謝a632172403提供設計教程的實作教學。
教學大綱:
本教程主要用Photoshop設計筆記本電腦的商業海報教程，海報的設計主要就是創意和細節的處理，本想有種科幻搬的效果，下面讓我們一起來學習吧。
設計教程教學開始
本例的最終效果：
Step 1:
Open up a new document 1000px wide and 600px high. Then paste an image of a laptop into your document. Create a new layer set called ‘laptop’ and put the layer containing your laptop image into this layer set.
1.新建寬1000px、高600px的新文件，把筆記本電腦的素材圖片導入舞台，然後將其所在文件夾重命名為“Laptop”。
Step 2:
Now I want to create a vanishing point for the screen of the laptop. Many Photoshop users, including myself, don’t yet have Photoshop CS2 or CS3, so this tutorial won’t utilize the useful vanishing point filter available in these versions. Instead, we’re going to manually create a fake vanishing point.
2.鑒於很多讀者並沒有將ps軟件更新到CS2/CS3，所以我們將用手工製作屏幕的消失點。
Select the screen part of your laptop using the lasso tool. Then copy your selection, create a new photoshop document, and paste in the selection. Go to image>image size and double whatever your image size is. In this case the original screen was 204px wide, so I simply doubled this to 408px.
使用索套工具取得筆記本電腦屏幕選區，Ctrl+C複製，然後新建圖層並粘貼，然後將其擴大一倍。
本例屏幕寬度204px，我們把它擴展到408px。
Then paste this new larger screen back into your original document. Positioning it roughly where you think it looks good in terms of perspective.
我們重新擺正擴大后屏幕的位置如下圖所示：
Step 3:
Now select your line tool and a nice bright color for it and draw lines each corner of your large screen through to the matching corner of the original screen and past to a vanishing point. Do this with each corner of the laptop screen, until you have something like the image below:
3.我們來使用亮色創建參考線，沿兩屏幕的對應點繪製，知道4條先匯聚於一點。
Step 4:
Now duplicate your larger laptop screen and select edit>free transform. Then in the menu near the top of your screen (see diagram below) change the W (width) and H (height) percentages from 100% to 90%.
4.複製圖層，自由變換，大小調整為原尺寸的90%。
Move this resized image so that it matches up with the perspective lines that you created earlier. Be sure to place this resized screen layer behind the largest screen layer but above your original laptop photo layer.
Repeat this process of duplicating/resizing/aligning using the resizing percentages of 80%, 70%, and 60% from your large screen layer. Remember that your original laptop photo is 50% of this large screen layer.
This is how your image should look after you have created this new screens and lined them up correctly:
使用相同的辦法依次創建，80%、70%、60%這三個新圖層。
Step 5:
Now create a new layer set called ‘photo 1′. Paste in the image that you want to manipulate. View a grid over your image and then use the free transform tool to resize your photo to fit nicely into the grid squares. Make sure that the photo fits into an even number of grid squares for it’s height and width. In this example the photo is resized to be 8 grid squares wide and 6 high.
5.新建圖層，命名為“photo1”，把我們要操作的圖片素材置入，顯示網格。
使用自由變化工具，調整圖片貼合網格，本例剛好是8個網格寬、6個網格高。
Step 6:
Now duplicate your photo layer, as you want to retain a copy. Be sure to hide the duplicate layer and go back to your original. Select your single column marquee tool from your selection palette (it’s under the Rectangle and Elliptical marquee tools). Using your grid click the grid line that marks the center point of your image and delete a central 1px column. Then switch to the single row marquee tool and do the same to delete a 1px line across the center of your image. You want these lines to be a little larger than 1px though, so grab your magic wand tool and click somewhere outside of your photo image. This will select all of the area surrounding the photo, but also the 1px lines cutting through it. Then go to select>modify>expand and expand the selection by 3px. Then hit delete to achieve an effect like the image below:
6.複製“photo1”圖層，重命名為"photo2"，作為備份，隱藏"photo2".
來到“photo1”圖層，選擇“單行矩形選擇工具‘，沿着網格線依次刪除1px的內容，得到如下圖所示效果。
如果覺得1px的間隔太窄的話，可以取得選取后，通過”選擇“ -”修改“-"擴展" 值設為3px，獲得更大的選區，然後刪除內容，獲得更大的間隔。
Step 7:
Now hide all of your duplicate laptop screens except the smallest one (the one that is 60% of the size of your largest). With your photo layer selected (the one you’ve just cut up using the grid) go to edit>transform>distort and distort the photo so that it fits exactly over this smallest laptop screen image. To fit it well you make need to reduce the layer’s opacity to allow the screen underneath to show though. The image below shows the transformed photo layer at 57% opacity, allowing some of the screen underneath to show through. Be sure to move this photo layer below the next largest laptop screen layer, so that it is mostly covered by it.
7.現在隱藏所有的圖層僅保留最小的一個圖層(60%屏幕尺寸那副)。
選中”photo2“，”編輯“-”變換“-”扭曲“，使圖片複合屏幕大小。
然後把圖層的不透明度設為57%，讓底層的內容區部分可見。
Step 8:
Now go back to your original photo layer. Duplicate it again, and using the same technique as before with the single row/column marquee tools cut it into 2X2 squares using the grid. As the image is 8 squares wide and 6 high, this will result in 12 squares each 4 grid squares in size. Again, use your magic wand tool to select the area around the photo and the lines cutting through it, then expand your selection by 3px and hit delete. Then use the distort transform tool to fit your new image to the 2nd smallest laptop screen. Remember again to move this photo layer behind the next largest laptop screen layer. The image below shows the result of this, with the photo layer again at 57% to allow me to nicely fit it to the screen image beneath.
Step 9:
Now repeat these steps, but make your squares half the size each time. So using the grid that will then be 1X1, 1/2X1/2, 1/4X1/4. To cut the photo into 1/2 and 1/4 grid square pieces I would recommend just using your judgement, but if you want to be really picky you can use rulers. Another tip is to duplicate the photo after cutting it into the squares, as this will save you having to repeat the slicing process right from the start each time.
9.重複此過程，確保每次單個方格的尺寸是上次的一半即可。
所以我們使用的網格單位依次為1*1、1/2X1/2和 1/4X1/4。
Step 10:
Here is the same image but with all duplicate laptop screen image layers hidden and all photo layer’s with 100% opacity.
10. 隱藏所有屏幕圖層。
所有photo圖層不透明度設為100%.
Step 11:
Now is the time-consuming part. Hide all of your photo layers except for your smallest photo layer. Use your magic wand tool set at 255 tolerance to select entire squares and delete them to leave a checkerboard effect. To do this simply go down each column deleting squares, being sure to leave a square remaining between each two that you delete. Then move onto the next column and repeat, but make sure that no squares you delete are next to an already deleted square, deleted squares should be diagonal to each other. The image below shows the various stages of doing this with each photo layer:
11. 現在到了最費時的一步，隱藏所有的photo圖層，除了最小尺寸的一張。
Step 12:
You should still have your original photo layer, as it was duplicated for safe keeping near the start of the tutorial. Duplicate the layer again, and move it so that it is the first layer above your laptop image layer. Then go to edit>transform>distort and fit the photo nicely over the laptop screen. Then hide all of your vanishing point guidelines and make sure that all of your checkerboard photo layers are visible. Seeing as all these layers are within the same layer set select the layer set and drag it to make the graphic more central in your document.
12. 打開我們之前備份的photo原圖，複製圖層，變換其大小后緊貼筆記本屏幕。
Step 13:
Right click on one of your photo squares layers and click blending options. Apply the drop shadow settings shown below. Then once this has been applied right click on the drop shadow shown in your layers palette, select ‘copy layer style’ and paste the layer style to all of your other photo squares layers. The outcome is shown below:
13.為photo圖層添加圖層樣式：投影參數設置如下：
技巧：為一個圖層添加樣式以後，右擊”複製圖層樣式“，然後把圖層樣式粘貼到其他圖層上，這樣可以為圖層快速添加圖層樣式。
Step 14:
Now create a new layer set below your laptop/photos layer set called ‘background’. Hide your laptop/photos layer set. Create a new layer and fill it with a white to light gray radial blur.
14.新建文件夾命名為”backgroud“。
隱藏其他圖層，創建鏡像漸變如下圖。
Step 15:
Paste a metal texture onto a new layer above your radial gradient layer and reduce it’s opacity to 20% for a subtle textured effect.
15. 粘貼紋理圖片到舞台，置於”background“上方，降低不透明度為20%。
Step 16:
Now create some bendy lines across your background using the pen tool. Be sure to have a white 1px brush selected and then once you have created your bendy pen line right click on it and select ’stroke path’. Then simply duplicate your line layer until you have multiple white lines across your background. I merged all of my line layers together and reduced the merged layer opacity to 30% for a more subtle effect.
16.使用鋼筆工具創建一組1px白色的縱貫背景寬度的曲線。
And we’re done!
To finish things off I added some cool text. Click the image below if you want the full sized version.
這是我們最終的結果。
–本文轉載自 http://www.missyuan.net 教學網 —
熱門推薦
留言回覆
