گروه مقاله : آموزش فتوشاپ
تاريخ انتشار : 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

کادر چهارم: Copyright 2010 My Company, LLC

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

  • 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 برای تویتر استفاده می کنیم.ما این ایکون را از اینترنت دانلود کرده ایم . و آنرا درون دایره ایجاد شده قرار داده ایم. ایکون و دایره را انتخاب کرده و ایکون را با دایره وسط چین می کنیم.

 

قالب سایت اپلیکیشین

 

در ادامه روی ایکون تویتر راست کلیک کرده و گزینه Select Pixels را انتخاب کرده و سپس روی لایه دایره کلیک کرده و دستور Edit > Clear را اجرا کنید.

لایه ایکون تویتر را حذف کرده و روی لایه دایره کلیک کنید و میزان opacity=15% را تنظیم کنید.

قالب سایت اپلیکیشین

 

گام 19

قالب سایت اپلیکیشین

برای باقی آیکون ها گام بالا را تکرار کنید.

گام 20

به لینک های پاصفحه خود کمی رنگ اضافه خواهیم کرد.

از ابزار تایپ استفاده کنید و متن هرکدام از کادر های متن را انتخاب کنید. و رنگ آنها  را به 83b546 تغییر دهید.

قالب سایت اپلیکیشین

 

 

تهیه و تنظیم توسط شرکت طراحی سایت سارگون با ما در تماس باشید.

 

 

نظرات كاربران :