ورود به سایت

ثبت نام در سایت

Registration confirmation will be e-mailed to you.

فراموشی رمز

1 × چهار =

بستن
بستن

طراحی قالب وب سایت در فتوشاپ(بخش اول)

طراحی قالب وب سایت در فتوشاپ(بخش اول)

قالب وب سایت در فتوشاپ

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

یک نکته:اگر مشاهده کردید و دید که در برخی از عکس ها بسیار محدود از سایت فونتیم استفاده شده به دلیل بسته بود سایت نیز ما از فونت fontawesome.com را استفاده کردیم تا حدامکان سعی کردیم این خطاها را رفع و عکس ها را ویرایش دهیم امیدوارم این ناهماهنگی را از ما ببخشید.

با ما همراه باشید.

سخنی با مخاطب

اگر مخاطب جدید ویکی چجور هستید ضمن خوش آمد گویی خدمتتان میرسانیم که این وب سایت یک دانشنامه مهارت محور است.

به صورت رایگان در اختیار تمام هم میهنان عزیزمان قرار گرفته است.

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

تمام هدف وب سایت و مدیران آن ارائه آموزشی مفید است.

لذا چنانچه از دید شما زاویه ای از این رسالت وجود دارد لطفا از ما دریغ نفرمایید.

 

چگونه ها را از ما بخواهید

ویکی چجور

پایگاه تخصصی چگونگی انجام کار

مطالب مرتبط


گام 1 - مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی مراحل تشکیل grid و قرار دادن grid )

مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی مراحل تشکیل grid و قرار دادن grid )

شروع طراحی 

ابتدا بعد از  نصب برنامه فتوشاپ، برنامه فتوشاپ را اجرا می‌کنیم .

بعد از اجرا، جهت ایجاد صفحه جدید از منوی file گزینه new را انتخاب می‌کنیم.

blank

 در صفحه باز شده در گزینه preset details  نام سایت مورد نظر یا نام صفحه مان را می‌نویسیم. 

در قسمت width (عرض) را 1600 می  زنیم در روبروی width نیز گزینه‌ی مقیاس ها لیست شده  است که گزینه میلی‌متر را انتخای می کنیم. height (ارتفاع) به 6000 تنظیم می کنیم،

resolution (شفافیت) را برابر 72  می‌گیرم. و در روبروی گزینه resolution نیز همان گزینه مقیاس وجود دارد که  pixels/inch را انتخای می کنیم.

color mode را برابر rgb color  8 بیت قرار می‌دهیم . Contents background را برابر withe قرار می‌دهیم و دکمهcreate را می‌زنیم.

blank

 مراحل تشکیل grid  برای تنظیم صفحه:

 بعد از ابن که صفحه جدیدی را ایجاد کردیم

  قصد داریم صفحه ای با مشخصات زیر نیز ایجاد کنیم

  اسم صفحه را boot strap grid  میگذاریم.

اندازه صفحه را از قسمت width(عرض) 5 و از مقیاس ها اینچ  را بر می گزینیم و height(ارتفاع) 7 اعمال می کنیم،

resolution (شفافیت) را برابر 300(چون که اندازه را برابر  inch قرار دادیم resolution را باید زیاد کنیم) 

و در روبروی گزینه resolution،مقیاس را به  pixels/inch تنظیم می کنیم.

color mode را برابر rgb color 8 بیت قرار می دهیم .

Contents background را برابر withe قرار می دهیم و دکمهcreate را می زنیم.

blank

از قسمت نوار ابزار گزینه rectangle tools را انتخاب و بر روی صفحه کلیک می کنیم.صفحه جدیدی باز می شود که with (عرض)  را برابر66 پیکسل وheight (ارتفاع)را برابر  2100 پیکسل  قرار می دهیم. ‌

از سمت راست 30 پیکسل فاصله می دهیم و همچنین رنگ را هم می توانیم از قسمت جعبه رنگ تغییر دهیم.

blank

بر روی لایه rectangle 1 راست کلیک کرده و گزینه duplicate layer را می زنیم .

تا از لایه فعلی که داریم  کپی بر داریم.

blank

در پنجره باز شده مشخصات صفحه duplicate ظاهر می‌شود.

در اولین گزینه نام فایل rectangle 1 duplicate: قرار دارد که قابل ویرایش نیست ولی در مقابل آن گزینه as می باشد که از rectangle1 copy  نمونه سازی می کند.

که می توانیم نام آن را عوض کرده و نام دلخواه خود را قرار دهیم.

که ما در اینجا rectangle 2  می نویسیم.

سربرگ destination  که در زیر منوی آن، گزینه  document می باشد که مشخص می کند فایل duplicate شده در کدام یک از صفحات ایجاد شده قرار بگیرد.

blank

 و طبق همین روش 12ستون یا به عبارتی دیگر  cool ایجاد می کنیم . و نتیجه کار به صورت زیر خواهد بود.

که 12 تا لایه با نام rectangle 1 تا rectangle 12 موجود می باشد.

blank

برای اینکه این لایه ها را با هم یکی و ادغام کنیم کلیه لایه ها را با هم انتخاب می کنیم.

به صورتی که یک لایه را انتخاب و برای انتخاب لایه بعدی کلید shift  را نگه داشته بقیه لایه ها را انتخاب و بر روی یکی از لایه ها کلیک و گزینه merge shape را می زنیم تا تمامی لایه ها ادغام شوند. ‌

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

blank

نکته: grid1 که شامل 12cool  می باشد را تشکیل می دهیم هر cool از هم 30 pixels فاصله دارند.

قرار دادن grid در صفحه:

Grid هایی که  در قسمت قبل ایجاد کرده و لایه ها را ادغام نمودیم،  بر روی لایه ادغام شده راست کلیک وگزینه duplicate را زده و از لایه کپی می‌گیریم.

blank

و صفحه زیر نمایان می شود.

blank

سپس در صفحه پروژه  نیز مشاهده می کنیم

که  grid ها بسیار کوچک و در سمت چپ قرار گرفته اند. برای اینکه grid ها به اندازه صفحه پروژه باشد

کلید ترکیبی ctrl+r نگه داشته تا فایل انتخاب شده، از قسمت properties طول و عرض فایل  را به اندازه with (عرض)  4000 پیکسل وheight (ارتفاع)را برابر  17000 پیکسل قرار می دهیم تا کل صفحه پروژه را پوشش دهد.

blank

نکته: همیشه لایه grid را در بالای لایه ها باید قرار  دهیم.

ذر پروژه از قسمت پانل لایه ها یک گروه با اسم header  ایجاد می کنیم .

برای ایجاد گروه در پانل پایین بر روی  icon  ی که شبیه پوشه می باشد کلیک می کنیم .

که به صورت پیش فرض new folder می باشد که بر روی گروه دابل کلیک کرده و نام آن را به header  تغییر می دهیم.

blank بعد از آن نسبت به پروژه خود پوشه و لایه ایجاد می کنیم.

گام 2 - مراحل طراحی هدر سایت به کمک فتوشاپ (طراحیmenu bar )

مراحل طراحی هدر سایت به کمک فتوشاپ (طراحیmenu bar )

طراحی هدر سایت

در قدم اول در پانل لایه ها یک پوشه که با نام header ایجاد کرده ایم.

نیز یک پوشه دیگر طبق پروژه خود ایجاد می کنیم .

اگه توجه نمایید، پوشه داخل پوشه مادر یا همان پوشه header با نام header-title قابل مشاهده است.

که پوشه در داخل پوشه مادر قرار ندارد برای اینکه داخل پوشه قرار بگیرد،

 پوشه  header-titleرا گرفته تا انتخاب شود و سپس با موس به داخل header می اندازیم که نمایش آن  به صورت زیر می شود.

blank

 قبل از  انجام هر کاری لایه چشمیgrid  را غیر فعال می کنیم .

blank

 بعد به گزینه ذره بین می‌رویم .

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

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم.

blank

و بر روی صفحه یک مستطیل به اندازه with (عرض)  را برابر1600 پیکسل وheight (ارتفاع)را برابر  57 پیکسل میکشیم که اعداد را از قسمت properties تنظیم می کنیم رنگ را هم برابر  #023646 قرار می دهیم.

و یک مستطیل به صورت زیر حاصل می شود. و همچنین تنظیمات هم در قسمت properties و در بالای پانل لایه هادر قسمت راست می باشد.

blank

طبق پروژه خود می خواهیم یک تاریخ را به قسمت مستطیل اضافه کنیم به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم .

blank

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

blank

متن را با خصوصیات زیر قرار می دهیم.

Font family: B koodak

ضخامت: bold

TT:24 pt

color: Rgb# 00bc3c

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 دوباره همانند بالا به نوار ابزار رفته و برای ساعت هم آیکن T یا  horizontal type tool را انتخاب می کنیم .

  در قسمت سمت چپ بر روی فضای سفید کلیک کرده و تاریخ مورد نظر را می نویسیم.  ویژگی متن را با خصوصیات زیر قرار می دهیم.

Font family: B sina

ضخامت: bold

TT:24 pt

color: Rgb# 00bc3c

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

دوباره همانند بالا به نوار ابزار رفته و برای منو هم  آیکن T یا  horizontal type tool را انتخاب می کنیم . 

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

اطلاعات سنگ ها   |   آرشیو   |   تقویم رویداد های اقتصادی  |   سکه فروشان مجاز  |  فهرست کارگزاری ها

  و هر متن دلخواه دیگر می نویسیم.  

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

دوباره همانند بالا به نوار ابزار رفته و برای منوی دوم  هم آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

وب سرویس  |  تبلیغات  | راهنما | درباره ما

  و هر متن دلخواه دیگر می نویسیم.  

متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

گام 3 - مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحیicon-title-menu )

مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحیicon-title-menu )

طراحی icon-title-menu

در قدم دوم پانل لایه ها یک پوشه که با نام header ایجاد کرده ایم  .

نیز یک پوشه دیگر طبق پروژه خود ایجاد می کنیم .

 اگه توجه نمایید، پوشه داخل پوشه مادر یا همان پوشه header با نام header-title-icon قابل  مشاهده است.

که پوشه در داخل پوشه مادر قرار  ندارد  برای اینکه داخل پوشه قرار بگیرد،

پوشه  header-title-icon را گرفته تا انتخاب شود و سپس با موس به داخل header می اندازیم که نمایش آن  به صورت زیر می شود.

blank

به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر 109 پیکسل وheight (ارتفاع)را برابر  126 پیکسل می کشیم که اعدا را از سمت properties تنظیم می کنیم و رنگ هم برابر  #023646 قرار می دهیم.

و یک مستطیل به صورت زیر حاصل می شود.و همچنین تنظیمات هم در قسمت properties  و همچنین بالای پنل لایه ها در قسمت راست می باشد.

blank

طبق پروژه خود ما می خواهیم از فونت آیکن استفاده کنیم  برای این کار در ابتدا برای دانلود فونت به سایت https://fontawesome.com/مراجعه می کنیم.

blank

بعد از جستجو نیز به اولین وب سایت میرویم.

blank

بر روی دکمه Start for Free نیزکلیک می کنیم و صفحه زیر نمایان می شود.

blank

و بعد از کلیک کردن  یک صفحه نمایان می شود که ما از این قسمت  install locally and use in desktop apps) Desktop)را می زنیم.

blank

بعد از زدن دکمه download  نیز یک صفحه باز می شود که از گزینه بالا روی گزینه on the desktop  را انتخاب می کنیم.

blank

 بعد از زدن دکمه Download Font Awesome Free for the Desktop را می زنیم.

blank

 بعد از زدن دکمه پنجره دانلود باز میشود .blank

 بعد از زدن دکمه ok منتظر می مانیم که فایل دانلود شود.

blank

نیز بعد از دانلود به پوشه دانلود میرویم .

blank

 بر روی فایل زیپ دابل کلیک می کنیم .

تا فایل در برنامه winRAR باز شود.

blank

 روی دکمهextract to  کلیک می کنیم.

 

blank

بعد از زدن دکمه extrect to  یک پنجره باز می شود که مسیری را که فایل قرار است استخراج شود را معین می کنیم و دکمه ok را میزنیم.

blank

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

blank

وارد پوشه می شویم که در داخل پوشه نیز سه پوشه وجوددارد که پوشه های  metedata , svgs نیز برای کد نویسی می باشد.

و پوشه دیگری که با نام otfs است را می زنیم.

blank

در داخل پوشه نیز 4 تا گزینه وجود دارد که بر روی فایل هایی که پسوند ttf دارندیا بغل آن ها آیکن a وجود دارد راست کلیک کرده و گزینه install را میزنیم.

blank

 بعد از زدن نیز یک پیغام می آید که حاضر به نصب فونت می باشید.

blank

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

blank

در این حالت  گزینه yes را میزنیم علت زدن این گزینه این می باشد که

سایت سازنده ورژنی تازه به محتوا آن قرارداده باشد بهتر است که شما هم بروز کنید. بعد از زدن دکمه yes نیز منتظر به نصب فونت می باشیم.

و بعد از نصب این پیام می رود یعنی عملیات با موفقیت انجام شد.

 نیز بعد از نصب فونت به سایت صفحه ی راهنمای آیکن های Font Awesome را می زنیم و به صفحه فونت آیکن ها میرویم.

blank

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

blank

بعد از انتخاب آیکن بر روی آن راست کلیک گزینه copy یا کلید ترکیبیctrl+c را می زنیم تا فونت مورد نظر انتخاب شود.

blank

اینک فونت در حافظه موس کپی شده و به فتوشاپ برگشته و به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم .

blank

در قسمت سمت چپ بر روی فضای سفید کلیک کرده و آیکن مورد نظر را جایگزین یا past  یا از کلید ترکیبیctrl+v را میزنیم.

اگه توجه کنید می بینید که علامت مربع و داخل آن ضرب در نیز نمایش داده شده است.

blank

این بدان معنا نیست که فونت در سیستم شما نصب نشده است این بدان معنا می باشد که فونت موردنظر را برای آیکن انتخاب نکرده اید.

برای این کار تنظیمات زیر را انجام می دهیم.

Font family: Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 00bc3c

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

به قسمت نوار ابزار رفته و گزینه rectangle tool می رویم.

blank

و بر روی صفحه یک مستطیل به اندازه with (عرض)  را برابر 1500 پیکسل وheight (ارتفاع)را برابر  126 پیکسل می کشیم که اعداد را از قسمت properties

تنطیم می کنیم رنگ هم برابر  # 11322c قرار می دهیم .

ویک مستطیل به صورت زیر حاصل می شود.و همچنین تنظیمات هم در قسمت properties  بالای پانل لایه ها در قسمت راست  می باشد.

blank

دوباره همانند بالا به  نوار ابزار رفته و برای نام سایت به  آیکن T یا  horizontal type tool را انتخاب می کنیم .

در قسمت سمت چپ بر روی فضای سفید کلیک کرده و نام مورد نظر را می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت: bold

TT:36 pt

color: Rgb# 0071ce

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

دوباره همانند بالا به  نوار ابزار رفته و برای منو هم به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

قیمت طلا و سکه   |   نرخ ارزها و دلار   |   سکه آتی   |   بازارهای جهانی  |  بازارهای داخلی  | قیمت خودرو |  بیشتر بدانید

 و هر متن دلخواه دیگر می نویسیم.

سپس نیز متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

گام 4 - مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی address-bar)

مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی address-bar)

در قدم سوم پانل لایه ها یک پوشه که با نام header ایجاد کرده ایم .

نیز یک پوشه دیگر طبق پروژه خود ایجاد می کنیم  

اگه توجه نمایید. که پوشه داخل پوشه مادر یا همان پوشه header با نام header-masir قابل مشاهده است .

که پوشه در داخل پوشه مادر قرار ندارد برای اینکه داخل پوشه قرار بگیرد.

  پوشه header-masir را گرفته تا انتخاب شود  و سپس با موس به داخل پوشهheader  می اندازیم که نمایش آن  به صورت زیر می شود.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool را میزنیم.

blank

و بر روی صفحه یک مستطیل به اندازه with (عرض)  را برابر 104 پیکسل وheight (ارتفاع)را برابر 50 پیکسل می کشیم که اعداد را از قسمت properties

تنظیم می کنیم  رنگ هم برابر  # 959595 قرار میدهیم.

ویک مستطیل به صورت زیر حاصل می شود.و همچنین تنظیمات هم در قسمت properties دربالای پانل لایه ها  قسمت راست  می باشد.

blank

  به نوار  ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

قیمت طلا و سکه

 و هر متن دلخواه دیگر می نویسیم.

متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:14 pt

color: Rgb# 023646

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

به قسمت نوار ابزار رفته و گزینه rectangle tool میزنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر1496پیکسل وheight (ارتفاع)را برابر  50 پیکسل میکشیم که اعداد را از قسمت properties

تنظیم می کنیم رنگ هم برابر  # d2d2d2 قرار میی دهیم.

و یک مستطیل به صورت زیر حاصل می شود.و همچنین تنظیمات هم در قسمت properties در الای پانل لایه هاقسمت راست ب می باشد.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر110پیکسل وheight (ارتفاع)را برابر  40 پیکسل مکشیم که اعداد را از قسمت properties

تنظیم می کنیم رنگ هم برابر  # eeeeee نقرار می دهیم .

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

blank

و همچنین تنظیمات هم در قسمت properties در  بالای پانل لایه ها قسمت راست می باشد.

blank

دوباره همانند بالا به نوار  ابزار رفته و برای نام شما اینجا هستید به  آیکن T یا  horizontal type tool را انتخاب می کنیم .

سپس در قسمت سمت چپ بر روی فضای سفید کلیک کرده و هر متن دلخواه دیگر می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت: regular

TT:16 pt

color: Rgb# 023646

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 دوباره همانند بالا به نوار ابزار رفته و برای مسیر هم به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

صفحه اصلی/قیمت طلا و سکه

 و هر متن دلخواه دیگر می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:18 pt

color: Rgb# 023646

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

گام 5 - مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی header-panel)

مراحل ایجاد هدر سایت به کمک فتوشاپ (طراحی header-panel)

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

نیز یک پوشه دیگر طبق پروژه خود ایجاد می کنیم .

اگه توجه نمایید ،که پوشه داخل پوشه مادر یا همان پوشه header با نام header-panel قابل  مشاهده است.

که پوشه در داخل پوشه مادر قرار  ندارد برای اینکه داخل پوشه قرار بگیرد،

روی پوشهheader-panel را گرفته تا انتخاب شود و سپس با موس به داخل پوشه headerمی اندازیم که نمایش آن  به صورت زیر می شود.

blank

به قسمت نوار ابزار رفته و گزینه rectangle tool میزنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر1600 پیکسل وheight (ارتفاع)را برابر 200 پیکسل میکشیم که اعداد را از قسمت properties

تنظیم می کنیم رنگ هم برابر  # e5e5e5 قرار می دهیم .

و یک مستطیل به صورت زیر حاصل می شود. و همچنین تنظیمات هم در قسمت properties دربالای پانل لایه ها قسمت راست  می باشد.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم .

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر1450پیکسل وheight (ارتفاع)را برابر  111 پیکسل میکشیم که اعداد را از قسمت properties تنظیم می کنیم و رنگ هم برابر # 959595 قرار می دهیم 

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

blank

و همچنین تنظیمات هم در قسمت properties در  بالای پانل لایه ها قسمت راست می باشد.

blank

به قسمت نوار ابزار رفته و بزار مستطیل را زده و مثلث کوچکی است که آن را زده و زیر منوی آن گزینه ellipse tool یا بیضی می رویم .

blank

برای اینکه به صورت دایره در بیاید برای کشیدن نیز کلید shift را پایین نگه میداریم می رویم.

و بر روی صفحه زده و یک دایره  به اندازه with (عرض)  را برابر122پیکسل وheight (ارتفاع)را برابر  111 پیکسل میکشیم که اعداد را از قسمت properties

تنطیم می کنیم رنگ هم برابر  # 959595 قرار می دهیم .

و یک دایره به صورت زیر حاصل می کنیم و در ابتدا مستطیل قرار می دهیم همانند شکل زیر

blank

 دوباره به قسمت نوار ابزار رفته و بزار مستطیل را زده و مثلث کوچکی است که آن را زده و زیر منوی آن گزینه ellipse tool یا بیضی می رویم .

blank

برای اینکه به صورت دایره در بیاید برای کشیدن نیز کلید shift را پایین نگه میداریم می رویم.

و بر روی صفحه زده و یک دایره  دیگر به اندازه with (عرض)  را برابر100پیکسل وheight (ارتفاع)را برابر  100 پیکسل میکشیم که اعداد را از قسمت properties تنطیم می کنیم  رنگ هم برابر  # f98b06 قرار می دهیم .

و یک دایره به صورت زیر حاصل می شود و در داخل دایره که در بالا طراحی کردیم قرار می دهیم همانند شکل زیر

blank

اگر توجه کنیم متوجه می شویم که انگار یک سایه سفید دارد برای طراحی سایه بر روی لایه راست کلیک می کنیم و گزینه Belding options را می زنیم.

blank

 یک صفحه باز می شود در قسمت سمت چپ  قسمت inner glow را می زنیم و تنظیمات مربوطه را انجام می دهیم.

و رنگ برابر ffffff می باشد.

blank

 به  نوار ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

قیمت زنده طلا و سکه ، ارزها و دلار

و هر متن دلخواه دیگر می نویسیم.

متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 5c5c5c

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

 

 

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 دوباره نوار  به ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

خانه

 و هر متن دلخواه دیگر می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# d4d4d4

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم .

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر400پیکسل وheight (ارتفاع)را برابر  100 پیکسل می کشیم که اعداد را از قسمت properties تنظیم می کنیم  رنگ هم برابر  # ffffff قرار می دهیم.

و یک مستطیل به صورت زیر حاصل می شود. و همچنین تنظیمات هم در قسمت properties در بالای پانل لایه ها قسمت راست  می باشد.

blank

دوباره نوار به ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

عبارتی را برای جستجو وارد نمایید

 و هر متن دلخواه دیگر می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:bold

TT:30 pt

color: Rgb# 666767

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر150پیکسل وheight (ارتفاع)را برابر  100 پیکسل می کشیم که اعداد را از قسمت properties تنطیم می کنیم  رنگ هم برابر  # 535353 قرار می دهیم 

و یک مستطیل به صورت زیر حاصل می شود.و همچنین تنظیمات هم در قسمت properties در بالای پانل لایه هاقسمت راست  می باشد.

blank

دوباره  به نوار ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

شاخص ها

 و هر متن دلخواه دیگر می نویسیم.

 متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 2f2e2e

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به سایت https://fontawesome.com/cheats مراجعه می کنیم و از بین آیکن ها دنبال فونت آیکن موردنظر می گردیم.

blank

بعد از انتخاب نیزراست کلیک گزینه copy یا کلید ترکیبیctrl+c را می زنیم تا فونت مورد نظر انتخاب شود.

blank

اینک فونت در حافظه موس کپی شده و به فتوشاپ برگشته و به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم .

blank

  در قسمت سمت چپ بر روی فضای سفید کلیک کرده و آیکن مورد نظر را جایگزین یا past  یا از کلید ترکیبیctrl+v را میزنیم.

اگه توجه کنیم می بینیم که علامت مربع و داخل آن ضرب در نیز نمایش داده شده است که در قسمت بالا درج شده است  و توضیحات لازم دادده شدکه

این بدان معنا نیست که فونت در سیستم شما نصب نشده است این بدان معنا می باشد که فونت موردنظر را برای آیکن  انتخاب

نکرده اید.

برای این کار تنظیمات زیر را انجام می دهیم.

Font family:Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 2f2e2e

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم.

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر100پیکسل وheight (ارتفاع)را برابر  100 پیکسل می کشیم  که اعداد را از قسمت properties تنظیم می کینم  رنگ هم برابر  #ffffff قرار می دهیم .

و یک مستطیل به صورت زیر حاصل می شود.

blank

دوباره  به سایت https://fontawesome.com/cheats مراجعه می کنیم و از بین آیکن ها دنبال فونت آیکن موردنظر می گردیم.

blank

و سپس بر روی آیکن راست کلیک و گزینه copy  یا از کلیک ترکیبی ctrl+c نیز استفاده میکنیم.

اینک فونت در حافظه موس کپی شده و به فتوشاپ برگشته و به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم .

blank

ودر قسمت سمت چپ بر روی فضای سفید کلیک کرده و آیکن مورد نظر را جایگزین یا past  یا از کلید ترکیبیctrl+v را میزنیم.

اگه توجه کنیم می بینیم که علامت مربع و داخل آن ضرب در نیز نمایش داده شده است که در قسمت بالا درج شده است و توضیحات لازم دادده شد که

این بدان معنا نیست که فونت در سیستم شما نصب نشده است این بدان معنا می باشد که فونت موردنظر را برای آیکن  انتخاب

نکرده اید.

برای این کار تنظیمات زیر را انجام می دهیم.

Font family:Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 2f2e2e

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 برای اینکه یکم به صورت پر رنگ در بیاید بر روی لایه فونت راست کلیک و گزینه Belding options را می زنیم.

blank

یک صفحه باز می شود در قسمت سمت چپ به قسمت drop shadowرا می زنیم و تنظیمات مربوطه را انجام می دهیم. و رنگ برابر 000000# می باشد.

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank به قسمت نوار ابزار رفته و گزینه rectangle tool می زنیم .

blank

و بر روی صفحه زده و یک مستطیل به اندازه with (عرض)  را برابر150پیکسل وheight (ارتفاع)را برابر  100 پیکسل می کشیم که اعداد را از قسمت

propeties تنطیم می کنیم رنگ هم برابر  # 535353 قرار می دهیم 

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

blank

و همچنین تنظیمات هم در قسمت properties در بالای پانل لایه ها قسمت راست  می باشد.

blank

دوباره  به نوار  ابزار رفته و برای متن به آیکن T یا  horizontal type tool را انتخاب می کنیم .

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

شاخصیاب

و هر متن دلخواه دیگر می نویسیم

متن را با خصوصیات زیر قرار می دهیم.

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 2f2e2e

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به سایت https://fontawesome.com/cheats مراجعه می کنیم و از بین آیکن ها دنبال فونت آیکن موردنظر می گردیم.

blank

و سپس بر روی آیکن راست کلیک و گزینه copy  یا از کلیک ترکیبی ctrl+c نیز استفاده میکنیم.

blank

اینک فونت در حافظه موس کپی شده و به فتوشاپ برگشته و به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم.

blank

اگه توجه کنیم می بینیم که علامت مربع و داخل آن ضرب در نیز نمایش داده شده است که در قسمت بالا درج شده است و توضیحات لازم دادده شد که

این بدان معنا نیست که فونت در سیستم شما نصب نشده است این بدان معنا می باشد که فونت موردنظر را برای آیکن  انتخاب

نکرده اید.

برای این کار تنظیمات زیر را انجام می دهیم.

Font family: Font Awesome 5 Free

ضخامت: solid

TT:50 pt

color: Rgb# ff7800

یا از طریق تنظیمات همانند شکل قابل تغییر می باشد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

اگر توجه کنید متوجه می شوید که یک سایه زرد رنگ وجود دارد. برای این کار بر روی لایه راست کلیک و بر روی Belding options می زنیم.

blank

و در پنجره باز شده در بین گزینه های سمت چپ در قدم اول به گزینه outer glow  میرویم که رنگ آن برابر رنگ # ffe400  می باشد و تنظیمات زیر را اعمال می کنیم.

blank

و در قدم دوم به گزینه drop shadow  میرویم که رنگ آن برابر رنگ # ff7200 می باشد و تنظیمات زیر را اعمال می کنیم.

blank

که همچنین چیزی حالتی پیدا کند.

blank

به قسمت نوار ابزار رفته و بزار مستطیل را زده و مثلث کوچکی است که آن را زده و زیر منوی آن گزینه rounded rectangle  tools یا مستطیلی که گوشه هایش گرد است رویم.

blank

و بر روی صفحه زده و یک مستطیل  گوشه گرد به اندازه with (عرض)  را برابر100پیکسل وheight (ارتفاع)را برابر 35 پیکسل می کشیم که اعداد را از قسمت  properties تنظیم می کنیم  رنگ هم برابر  # f98b06 قرار می دهیم

و یک مستطیل به صورت زیر حاصل می شود و همچنین نیز گوشه ها را گرد را  به گرد تر در می آوریم هر طرف به 5/17 پیکسل می باشد از طریق شکل زیر.

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

 به قسمت نوار ابزار رفته و بزار مستطیل را زده و مثلث کوچکی است که آن را زده و زیر منوی آن گزینه ellipse tool یا بیضی می رویم .

blank

برای اینکه به صورت دایره در بیاید برای کشیدن نیز کلید shift را پایین نگه میداریم می رویم.

و بر روی صفحه زده و یک دایره  دیگر به اندازه with (عرض)  را برابر20پیکسل وheight (ارتفاع)را برابر 20 پیکسل می کشیم و اعداد ار از قسمت properties

تنطیم می کنیم رنگ هم برابر  # ffffff قرار می دهیم.

  یک دایره به صورت زیر حاصل می شود و در داخل دایره که در بالا طراحی کردیم قرار می دهیم همانند شکل زیر

blank

اگر توجه کنید متوجه می شوید که انگار یک سایه سفید دارد برای طراحی سایه بر روی لایه راست کلیک می کنیم و گزینه Belding options را می زنیم.

blank

در پنجره باز شده در بین گزینه های سمت چپ در قدم اول به گزینه drop shadow  میرویم که رنگ آن برابر رنگ # ffffff  می باشد و تنظیمات زیر را اعمال می کنیم.

blank

که همچنین چیزی حالتی پیدا کند.

blank

 به سایت https://fontawesome.com/cheats مراجعه می کنیم و از بین آیکن ها دنبال فونت آیکن موردنظر می گردیم.

blank

بعد از انتخاب نیزراست کلیک گزینه copy یا کلید ترکیبیctrl+c را می زنیم تا فونت مورد نظر انتخاب شود.

blank

 اینک فونت در حافظه موس کپی شده و به فتوشاپ برگشته و به نوار ابزار رفته و آیکن T یا  horizontal type tool را انتخاب می کنیم

blank

سپس نیز در قسمت سمت چپ بر روی فضای سفید کلیک کرده و آیکن مورد نظر را جایگزین یا past  یا از کلید ترکیبیctrl+v را میزنیم.

اگه توجه کنیم می بینیم که علامت مربع و داخل آن ضرب در نیز نمایش داده شده است که در قسمت بالا درج شده است و توضیحات لازم دادده شد که

این بدان معنا نیست که فونت در سیستم شما نصب نشده است این بدان معنا می باشد که فونت موردنظر را برای آیکن  انتخاب

نکرده اید.

برای این کار تنظیمات زیر را انجام می دهیم.

Font family: Font Awesome 5 Free

ضخامت:solid

TT:53 pt

color: Rgb# 3e3e3e

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

یا

blank

بعد از اینکه تنظیمات را اعمال کردیم صفحه به صورت زیر خواهد شد.

blank

اطلاعات مطلب

  • ui/ux
  • 9,541 بازدید
  • blankblankblankblankblank (4 votes, average: 3٫75 out of 5)
    blankLoading...
  • آخرین ویرایش توسط : مهدی هاتفی نیا - شنبه, 21 سپتامبر 19, 5:24 ب.ظ
  • ویکی چجور

دیدگاه کاربران

  1. Avatar
    حکیمه فولادپنجه - 2019/09/25 - 11:09 ق.ظ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بهترین علوم و دانش برای شما گردآوری میشه

آخرین های آیا میدانید

از همه جا براتون مطلب داریم لطفا کلیک کنید

مطالب برگزیده

موضوعات مهم سایت

مطالب محبوب