ورود به سایت

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

Registration confirmation will be e-mailed to you.

فراموشی رمز

11 − 2 =

بستن
بستن

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

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

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

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

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

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

سخنی با مخاطب

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

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

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

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

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

 

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

ویکی چجور

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

مطالب مرتبط


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

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

شروع طراحی 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Font family: B koodak

ضخامت: bold

TT:24 pt

color: Rgb# 00bc3c

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

یا

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

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

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

Font family: B sina

ضخامت: bold

TT:24 pt

color: Rgb# 00bc3c

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

یا

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

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

یا

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

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

یا

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

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

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

طراحی icon-title-menu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Font family: Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 00bc3c

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

یا

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

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

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت: bold

TT:36 pt

color: Rgb# 0071ce

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

یا

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:16 pt

color: Rgb# 0071ce

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

یا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قیمت طلا و سکه

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:14 pt

color: Rgb# 023646

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

یا

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

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

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

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

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

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

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

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت: regular

TT:16 pt

color: Rgb# 023646

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

یا

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:18 pt

color: Rgb# 023646

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

یا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 5c5c5c

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

 

 

یا

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

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

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

خانه

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# d4d4d4

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

یا

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

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

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

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

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

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

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

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

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

Font family: IRANYekanWeb

ضخامت:bold

TT:30 pt

color: Rgb# 666767

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

یا

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

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

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

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

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

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

شاخص ها

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 2f2e2e

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

یا

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

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

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

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

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

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

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

نکرده اید.

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

Font family:Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 2f2e2e

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

یا

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

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

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

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

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

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

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

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

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

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

نکرده اید.

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

Font family:Font Awesome 5 Free

ضخامت: solid

TT:48 pt

color: Rgb# 2f2e2e

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

یا

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

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

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

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

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

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

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

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

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

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

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

شاخصیاب

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

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

Font family: IRANYekanWeb

ضخامت:regular

TT:24 pt

color: Rgb# 2f2e2e

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

یا

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

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

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

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

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

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

نکرده اید.

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

Font family: Font Awesome 5 Free

ضخامت: solid

TT:50 pt

color: Rgb# ff7800

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

یا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نکرده اید.

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

Font family: Font Awesome 5 Free

ضخامت:solid

TT:53 pt

color: Rgb# 3e3e3e

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

یا

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

اطلاعات مطلب

  • ui/ux
  • 7,850 بازدید
  • (4 votes, average: 3٫75 out of 5)
    Loading...
  • آخرین ویرایش توسط : مهدی هاتفی نیا - شنبه, ۳۰ شهریور ۹۸, ۵:۲۴ ب.ظ
  • ویکی چجور

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

  1. Avatar
    حکیمه فولادپنجه - ۱۳۹۸/۰۷/۰۳ - ۱۱:۰۹ ق.ظ

پاسخی بگذارید

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


مطالب تصادفی پر بازدید