گروه مقاله : آموزش فتوشاپ

تاريخ انتشار : 1396/03/27 - 17:25

كد :7641

طراحی قالب سایت فروش اپلیکیشن

در این مقاله ایجاد قالب یک سایت فروش اپلیکیشن های موبایل را آموزش داده ایم . با ما همراه باشید.

آموزش فتوشاپ طراحی قالب سایت اپلیکیشن

شرکت های تولیدکننده و طراحی اپلیکیشن های موبایل معمولا وبسایتی برای معرفی محصولات خود دارند. اگر به گوگل پلی مراجعه کرده باشید. حتما متوجه شده اید که تمام شرکت های ارائه دهنده نرم افزار های اندرویدی سایتی برای معرفی محصولات خود دارند. در این آموزش قصد داریم قالب سایتی را طراحی کنیم که در آن اپلیکیشن های موبایل به فروش میرسد.

طرحی که در بالا دیدید از یک وبسایت واقعی الهام گرفته شده است.

گام 1

همانطور که در آموزش های قبلی هم مشاهده کردید، برای طراحی قالب سایت اولین کاری که باید انجام دهیم ایجاد یک سند جدید است. سند خود را در ابعاد Height,Width=1100px و رزولوشن 72 ایجاد کنید. و پسزمینه را به سفید تغییر دهید.

حالا باید دو خط راهنما ایجاد کنیم که مشخص کننده فضای اصلی سایت هستند.

دستور زیر را اجرا کنید.

View > New Guide

برای اولین خط راهنما Orientation= Vertical و Position=70 px و برای دومین خط راهنما دوباره دستور View > New Guide را اجرا و Orientation= Vertical و Position=1030 را تنظیم کنید.

حالا باید فضای 960 پیکسلی را برای فضای اصلی سایت خود مشخص کرده باشیم.

گام 2

در گام بعدی باید پس زمینه را رنگ کنیم، ابزار سطل رنگ را بردارید و یا کلید میانبر shift+G را بزنید . و رنگ روزمنیه خود را روی کد هگزا دسیمال 1e1e1e # قرار داده و روی بوم خود کلیک کنید، تا پسزمینه رنگ شود:

برای افزودن بافت دستور Filter > Noise > Add Noise= Amount=2.5 را اجرا کنید:

گام 3

در مرحله بعد باید یک ناحیه روشن ایجاد کنیم، که فوکوس تصویر را به بالای تصویر منتقل کند.

ابزار براش را انتخاب کنید. و اندازه براش را برروی 400px و سختی آن را روی صفر بگذارید:

یک لایه جدید ایجاد کنید و نام آنرا Spotlight بگذارید:

رنگ روزمینه را به سفید تغییر داده و با ابزار براش یک دایره در بالای تصویر ایجاد کنید:

برای ترکیب این نور با پس زمینه به آن کمی نویز دهید برای اینکار از دستور Filter > Add Noise= Amount=20 و تیک گزینه Monochromatic را در پنجره نویز بزنید:

برای اینکه ناحیه روشن نرم تر باشد، دستور Filter > Blur > Gaussian=radius=50.0 را اجرا کنید:

در آخر میزان Opacity=25% لایه Spotlight را کم کنید:

گام4

ما از تصویر iPhone در این قسمت استفاده کرده ایم . یادتان باشد که عکس با کیفیتی را دانلود و استفاده کنید . بعد از دانلود عکس گوشی دلخواه خود فایل آن را در فتوشاپ باز کنید. ما تصور را به سند خود منتقل کرده و نام لایه آن را iPhone گذارده ایم:

اولین تصویر موبایل را به خط راهنمای سمت چپ بچسبانید و حدود 100 پیکسل از بالا فاصله بدهید:

برای سفارشی کردن تصویر موبایل خود، ما در فایل خود تصویری از صفحه محتوای نرم افزار داشته ایم و آن را جایگزین کرده ایم، شما میتوانید این صفحه را دانلود کرده و آن را کپی کرده و با انتخاب ناحیه صفحه موبایل در سند اصلی از دستور File > Place, استفاده کنید. اگر لازم به تغییر اندازه و مکان این تصویر جدید هست اینکار را انجام دهید:

پوشه iPhone خود را کپی کنید، در این پوشه این دو عکس قرار دارند. نام پوشه کپی را iPhone 2 بگذارید .

حالا دستور Edit > Transform > Scale را اجرا کرده و اندازه نسخه کپی را در طول و عرض 107.0% بکنید . مکان این موبایل کپی را با 50 پیکسل فاصله از بالا وبا 200 پیکسل فاصله از سمت چپ خط راهنما قرار دهید :

حالا صحفه موبایل روزمنیه را با تصویر دیگری جایگزین کنید ما این تصویر را در پوشه iPhone 2 قرار داده ایم.

گام5:

برای ایجاد بازتاب گوشی ها باید هر دو موبایل را انتخاب کنیم ،ما موبایل اول را در پوشه iPhone و موبایل دوم را در پوشه iPhone 2 قرار داده ایم . حالا این دو پوشه را انتخاب و دستور Layer > Duplicate Layers را اجرا کنید. و روی OK کلیک کنید و سپس دستور Layer > Merge Layers را اجرا کنید.

حالا باید این لایه کپی را معکوس کنیم. برای اینکار از دستور Edit > Transform > Flip Vertical استفاده می کنیم و لایه کپی را در زیر لایه اصلی قرار میدهیم:

به این لایه کپی ماسک لایه اضافه کنید. در مقاله های ماسک گذاری در فتوشاپ و انواع مختلف ماسک در باره نحوه ماسک گذاری به صورت مشروح صحبت کرده ایم:

ابزار گرادیانت را انتخاب کنید و یا کلید میانبر G را بزنید . گرادیانت سیاه به سفید را انتخاب کنید . یک گرادیانت از پایین موبایل های رو به پایین تا حدود 50 پیکسل مانده به بالای این موبایل ها رسم کنید:

در نهایت هم opacity=30% لایه کپی را کاهش دهید.

گام 6

در این گام باید اطلاعاتی در باره نرم افزار خود را در سمت راست موبایل ها، اضافه کنیم . برای اینکار ابتدا یک خط راهنمای دیگر اضافه کنید. ما دستور View > New Guide را اجرا و orientation= Vertical و position=550px قرار داده ایم.

حدود 100px از بالای صفحه ما لوگوی خود را قرار خواهیم داد. لوگوی موجود در عکس زیر متعلق به سایت اصلی این تم است . شما میتوانید آن را با لوگوی خود جایگزین کنید. به گرادیانت موجود روی متن لوگو دقت کنید:

در زیر لوگو ، ما پاراگراف های خود را اضافه خواهیم کرد. این پاراگراف ها توضیحاتی در باره نرم افزار خواهد بود. ابزار تایپ را برداشته و یک ناحیه درج متن دراگ کنید. این ناحیه بین خط راهنمای وسط و خط راهنمای سمت راست خواهد بود. ما از ویژگی های زیر برای تایپ متن استفاده کرده ایم:

Font Family: Helvetica Neue
Size: 16 px
Style: Regular
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

گام 7

در این گام ما یک دکمه رسم می کنیم. که کاربران بتوانند نرم افزار را خریداری کنند. برای رسم دکمه از ابزار رسم مستطیل گوشه گرد استفاده کنید . برای انتخاب این ابزار میتوانید کلید میانبر Shift+U را بزنید یک مستطیل 240x75px با گردشدگی 4 پیکسل رسم کنید. این مستطیل را با خط وسط مماس کرده و از پاراگراف های تایپ شده به اندازه 45 پیکسل پایین تر بیاورید:

حالا ما به این دکمه باید استایل لایه بدهیم :

برای افزودن ایکون اپل ، یک متن ناحیه تایپ کوچک در داخل دکمه ایجاد کنید. و نماد اپل را در آن کپی کنید . شما میتوانید از ایکون png اپل نیز استفاده کنید:

در آخر ، میزان opacity=30% لایه را کم کنید.

برای متن روی دکمه از ابزار تایپ استفاده کنید و متنی مانند ex: Download now on the App Store یا هر متن دیگری را تایپ کنید. ما برای تایپ این متن تنظیمات زیر را اعمال کرده ایم:

Font Family: Helvetica Neue
Size: 11 px (first line) 24 px (second line)
Style: Bold
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

به این متن استایل لایه ای مانند تصویر زیر اضافه کنید:

در مرحله بعد ، باید یک خط جدا کننده روی دکمه ایجاد کنیم . اینکار با ابزار رسم خط یا با کلید میانبر Shift+U قابل انجام است. برای رسم خط از رنگ سفید و کلید میانبر Shift برای رسم خط بصورت مستقیم استفاده کنید:

حالا opacity=15% لایه را کم کنید و لایه خط را کپی کنید. برای اینکار کلید Ctrl+J را بزنید . رنگ خط کپی را مشکی کنید. و میزان opacity=10% لایه را تنظیم کنید. و لایه کپی را 1 پیکسل به سمت چپ بکشید:

آخرین عنصر برای افزودن به این دکمه ایکونی برای نمایش شروع دانلود است. برای ایجاد آن ابتدا با ابزار رسم بیضی یک دایره با قطر 25px ایجاد کنید:

به این لایه استایل زیر را اعمال کنید:

ابزار رسم شکل سفارشی را انتخاب کرده و یا کلید میانبر Shift+u را بزنید و شکل فلش را انتخاب کنید ما از شکل Arrow 9 استفاده کرده ایم. یک فلش کوچک به اندازه 10px ایجاد کنید و آنرا داخل دایره ایجاد شده، در مرحله قبل قرار دهید و رنگ آن را به سفید تغییر دهید.

گام 8:

حالا یک مستطیل برای قسمت نرم افزار خود لازم داریم. ابزار رسم مستطیل گوشه گرد را با چندبار فشردن کلید میانبر Shift+U انتخاب کرده و گردشدگی گوشه آن را برابر 4 پیکسل قرار دهید . یک مستطیل که با دکمه دانلود همپوشانی داشته باشد ایجاد کنید که ارتفاع آن 52 پیکسل و عرض آن بزرگتر از 100 پیکسل باشد:

رنگ این مستطیل را به کد هگزادسیمال 2B2B2B تغییر داده و آنرا به زیر لایه دکمه ببرید:

حالا به لایه استایل لایه خط دور بدهید . از اندازه های تصویر زیر استفاده کنید:

حالا ما میخواهیم اطلاعات قیمت را ایجاد کنیم. برای اینکار از دو جعبه ورود متن جداگانه استفاده خواهیم کرد . زیرا که افکت متفاوتی برای هر کدام میخواهیم.

برای اولین جعبه متن از واژه ONLY با تنظیمات زیر استفاده می کنم:

Font Family: Helvetica Neue
Size: 19 px
Style: Bold
Anti-aliasing: Crisp
Color: #FFFFFF

برای دومین کادر یا جعبه متن از واژه $1.99 استفاده می کنم و تنظیمات زیر را به آن اعمال می کنم:

گام 9

به قسمت زیرین دکمه برویم ، یادمان هست که ما دکمه را در سمت راست موبایل ها ایجاد کرده ایم، حالا میخواهیم به زیر این قسمت محتوایی را اضافه کنیم، ولی قبل از آن میخواهیم این دو قسمت از هم جدا باشند. برای جدا کردن این دو قسمت از یک خط استفاده خواهیم کرد. تکنیک این خط درست مانند همان تکنیکی است که در خط روی دکمه بکار بردیم .

با ابزار رسم خط ویا کلید میانبر Shift+U یک خط رسم کنید . کلید میانبرshift را هنگام رسم خط نگه داشته تا خط مستقیم رسم شود. یک خط یک پیکسلی رسم کنید و رنگ آن را سیاه انتخاب کنید:

میزان opacity=80% لایه را کاهش دهید. و آنرا با دستور Ctrl+j کپی کنید. رنگ خط کپی را به سفید تغییر دهید و opacity=10% لایه را تنظیم کنید. حالا با انتخاب ابزار جابجایی و کلید های جهت دار این لایه را یک پیکسل به پایین ببرید.

گام 10

در ناحیه زیر سایت یعنی در زیر قسمتی که الان یک خط ایجاد کرده ایم. دو ستون ایجاد می کنیم. یک ستون برای عکسها و یک ستون برای لیست ابزار ها .

با ستون عکس ها شروع کنیم. از موتورهای جستجو برای دانلود تصاویر مرتبط استفاده کرده و عکس ها را کپی و با دستور File > Place آنها را در سند اصلی خود قرار دهید. اندازه تصویر را تغییر داده و آن را در نزدیکی خط راهنمای سمت چپ قرار دهید :

لایه را در پنل لایه ها انتخاب کرده و روی ایکون افزودن ماسک لایه دوبار کلیک کنید تا ماسک وکتور افزوده شود.

با ابزار رسم مستطیل گوشه گرد یک مستطیل با گردشدگی 6 پیکسل یک مستطیل گوشه گرد به ابعداد 175x120px رسم کنید.(مترجم : برای استفاده از این ابزار باید در نوار آپشن نوع آن را به path تغییر دهید. )

حالا با این تصویر خط دوری با تنظیمات زیر ارائه میدهیم:

مراحل بالا را تکرار کنید، تا سایر تصاویر خود را ایجادکنید، بین تصاویر خود 35 پیکسل فاصله ایجاد کنید:

گام 11

برای جداکردن ستون سمت چپ از ستون سمت راست یک خط 1px از بالای اولین تصویرتا پایین آخرین تصویر رسم کنید. اندازه این خط حدود 55 پیکسل خواهد بود.

رنگ خط را به سفید تغییر داده و opacity=5% لایه آن را تغییر دهید:

گام 12

به قسمت ابزار ها، عنوان و توضیحات اضافه می کنیم، (ما از واژه Leaflet Features استفاده می کنیم) مکان متن را با فاصله 55 پیکسل از سمت چپ خط جدا کننده قرار دهید. از تنظیمات زیر استفاده کنید:

Font Family: Helvetica Neue
Size: 24 px
Style: Regular
Tracking: -10
Anti-aliasing: Crisp
Color: #FFFFFF

حالا لیست ابزار های خود را در زیر عنوان ایجاد می کنیم. یک کادر متن و شش و یا پنج خط متن برای توضیح ابزار ها اضافه کنید. به این قسمت تنظیمات زیر را اعمال کنید:

Font Family: Helvetica Neue
Size: 15 px
Style: Regular
Leading: 28 px
Tracking: -10
Anti-aliasing: Sharp
Color: #8d8c90

گام های بالا را تکرار کنید تا بخش نیازهای نرم افزار را ایجاد کنید:

گام 13

برای اینکه متن ابزار های خود را چیدمان کنیم، به آن بالت اضافه می کنیم. اینکار را با انتقال کادر متن ابزار ها به اندازه 25 پیکسل به سمت راست شروع کنید.

حالا ابزار رسم بیضی را انتخاب کرده و یا کلید میانبر Shift+U را چندین بار بزنید. یک دایره به قطر 9 پیکسل رسم کنید. و آن را در سمت چپ متن اولین ابزار قرار دهید. رنگ دایره را به کد bce086 تغییر دهید.

استایل لایه زیر را به این دایره بدهید:

گام 14

حالا این بالت خود را برای سایر خطوط کپی کنید. ما از کلید Ctrl+J برای کپی این بالت استفاده کرده و بعد هر کدام را 28 پیکسل به پایین برده ایم تا تصویر زیر ایجاد شود:

گام 15

برای ایجاد بخش پاصفحه با همان تکنیک قسمت قبل یک خط جداکننده ایجاد کرده ایم . به گام 9 بازگردید:

گام 16

حالا ما میتوانیم لینک های مد نظر خود را به پاصفحه اضافه کنیم. ابتدا باید چهار کادر متن ایجاد کنیم. در این مقاله کادر متن و جعبه متن به یک معنا به کار رفته اند.

یک کادر متن با ابعاد 160x40px ایجاد کنید. به این کادر کمی متن اضافه کنید. و اینکار را سه بار تکرار کنید کادر متن ها باید در کنار هم رسم شود.

کادر اول: Follow @mycompany on Twitter for news and updates

کادر دوم : For help & support head to our Support area

کادر سوم: Download our press and media kit

از تنظیمات زیر برای این چهار کادر متن استفاده کنید:

Font Family: Helvetica Neue
Size: 12 px
Style: Regular
Leading: 20 px
Anti-aliasing: Sharp
Color: #5555552

گام 17

برای اینکه این چهار کادر ایجاد شده در گام قبل را مرتب کنیم. ابتدا پوشه ای به نام Footer ایجاد کرده ایم.

اولین کادر متن را 55 پیکسل از خط راهنمای سمت چپ فاصله داده و آخرین کادر متن را با خط راهنمای سمت راست مماس خواهیم کرد.

حالا هر چهار لایه متن را در پوشه Footer انتخاب کرده و ابزار جابجایی و یا کلید میانبر V را انتخاب کنید و روی دکمه Align vertical centers در نوار آپشن کلیک کنید. تا کادرمتن ها با هم تراز باشند.

گام 18

حالا به پاصفحه یک ایکون برای لینک های خود اضافه میکنیم. ابزار رسم بیضی را با چندبار فشردن کلید میانبر shift + U انتخاب و یک دایره به قطر 36px ایجاد کنید. رنگ این دایره را سفید انتخاب کنید. و آنرا قبل از اولین جعبه متن پاصفحه قرار دهید. حالا دستور Layer > Rasterize > Layer را ایجاد کنید.

حالا ایکون خود را در این دایره ایجاد کنید ما از ایکون T برای تویتر استفاده می کنیم.ما این ایکون را از اینترنت دانلود کرده ایم . و آنرا درون دایره ایجاد شده قرار داده ایم. ایکون و دایره را انتخاب کرده و ایکون را با دایره وسط چین می کنیم.