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

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

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

 

[fa type=”download”] دانلود 


instagram-portfolio-preview

 


عناصر مورد نیاز برای این آموزش

به منظور دنبال کردن مرحله به مرحله ی این آموزش به عناصر زیر نیاز داریم که بطور رایگان می شود دانلود کرد:

  • عکس Mountains از وب سایت Unsplash
  • فونت Kaushan Script از وب سایت Font Squirrel
  • فونت Lato از وب سایت Font Squirrel
  • آیکون های Social media icons از وب سایت iconfinder
  • عکس نمونه کارها از وب سایت Unsplash
  • عکس نمونه کارها از وب سایت Refe

 

آماده سازی سند جدید

 

مرحله اول 

کار را با ایجاد یک سند جدید در فتوشاپ که با استفاده از تنظیمات زیر نشان داده شده  آغاز می کنیم (…File > New). شما آزاد هستید که با هر ابعادی از بوم راحت هستید استفاده کنید. عرض وب همیشه ثابت نیست.

create-new-document

مطمئن شوید که Resolution بر روی pixels/inch 72 تنظیم شده باشد.

 

مرحله ی دوم

اجازه دهید کمی راهنمایی کنم، بنابریان طرح ما به اندازه ی کافی فضای کافی دارد و متعادل بنظر می رسد. من همیشه از خطوط راهنما (خط های افقی و عمودی که برای تراز بودن عناصر استفاده می شود)، اما استفاده از خطوط راهنما این تضمین را خواهد کرد که طرح ما تمیز است و کمک خواهد کرد که عرض وب سایت خود را تعیین کنیم. به (…View > New Guide) رفته و مجموعه از خط های صاف را بر روی صفحه رسم کنید. من معمولا 1000px را به عنوان عرض وب سایت انتخاب می کنم و کمی از خطوط راهنما در گوشه و کنار استفاده می کنم بنابراین فضای خالی برای نفس کشیدن وجود دارد، همیشه از فضای خالی در طرح های خود استفاده کنید، لازم نیست تمام قسمت های مختلف طرح را شلوغ کنیم.

 

توجه: خطوط راهنمای استفاده شده در این آموزش:

  • خط راهنما عمودی در 100px
  • خط راهنما عمودی در 600px
  • خط راهنما عمودی در 1100px

add-new-guide

با توجه به قوانین و مقررات فتوشاپ، ما همه چیز را سازمان یافته و ساده نگه می داریم تا به راحتی در فایل ها پیمایش و ویرایش کنیم. بیایید سه گروه لایه به نام های Header, Photos و Contact ایجاد کنیم. برای ایجاد گروه (Group) به (...Layer > New > Group) مراجعه کنید و عنوان هر یک را با توجه به نام های ذکر شده مشخص کنید. برای ساخت یک گروه به روش سریعتر، تنها کافی است بر آیکون آن کلیک کنید.

quick-group-creation-button

 

طراحی بخش سربرگ (Header)

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

 

مرحله اول

بیایید اول پس زمینه بلاگ را ایجاد کنیم. در گروه Header که قبلا درست کردیم، یک شکل مستطیل با هر رنگی به وسیله ی ابزار (Rectangle Tool (U رسم نمایید. در این طرح من یک مستطیل در اندازه ی 1200x600px رسم کرده ام و در قسمت بالایی صفحه قرار داده ام.

حال عکس کوه ها Mountains را دانلود کرده، و آن را در فتوشاپ، در بالای لایه ی مستطیل قرار دهید. نام لایه ی عکس را به هر نام دلخواهی که قابل شناسایی باشد تغییر دهید، به عنوان مثال IMG. حال کلید Alt را نگه داشته و ماوس را بر روی لایه ی عکس کمی تکان دهید تا وقتی یک علامت فلش کوچک در زیر لایه پدیدار شود، سپس آزاد کنید. با این کار شما یک Clipping Mask ایجاد کرده اید.

حالا از دکمه های ترکیبی Ctrl+T برای تغییر اندازه تصویر استفاده کنید.

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

place-mountains-img

 

مرحله دوم

بیایید برخی از تنظیمات عکس را تغییر دهیم تا بیش از پیش واضح و جذاب باشد. یک لایه ی جدید با نام Shadow ایجاد کنید و یک Clipping Mask همانطور که در مرحله قبل به عکسمان اضافه کردیم به لایه جدید اضافه کنید. آنگاه ابزار (Gradient Tool (G را انتخاب کنید و رنگ های گرادیانت را از مشکی 000000# تا شفاف (transparent) تغییر دهید، آنگاه کلید Shift را نگه داشته و با درگ کردن ابزار از پایین عکس تا وسط عکس به آن سایه اضافه کنید، در آخر شفافیت لایه ی گرادیانت را کم کنید Opacity = 60%

black-to-transparent-gradient

 

reduce-gradient-opacity

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

 

مرحله سوم

اجازه دهید رنگ های بیشتری را به header خود اضافه کنیم تا بیشتر جذاب شود. یک لایه ی جدید با نام Gradient ایجاد کنید و یک بار دیگر ابزار (Gradient Tool (G را انتخاب کنید. بعد از آنکه رنگ های گرادیانت را از رنگ ارغوانی 37056b# تــا رنگ صورتی ff01fc# (یا هر رنگی که شما خواستید) تنظیم کردید آنگاه ابزار را از گوشه ی بالا، سمت چپ، تا گوشه ی سمت راست پایین تصویر، درگ کنید. در آخر هم، شفافیت لایه ی gradient را کم کنید Opacity = 20%

 

مرحله چهارم

زمان آن است لوگویی را در طرح قرار دهیم. ابزار تایپ افقی (Horizontal Type Tool (T را انتخاب کنید و نام دلخواهی را تایپ کنید، به عنوان مثال نام خود را وارد کنید. برای این آموزش من از فونت بسیار شیک Kaushan Script با اندازه ی 21px را انتخاب کرده ام. لوگوی خود را در گوشه سمت چپ بعد از اولین خط راهنمای وب سایت قرار دهید. لوگو را 50px به سمت پایین بکشید تا فضای منفی کافی داشته باشد، با این کار وب سایت شما تمیز و حرفه ای به نظر می رسد.

write-down-portfolio-name

 

مرحله پنجم

ما برخی از آیکون های شبکه های اجتماعی را اضافه می کنیم تا کاربران شما را در شبکه های اجتماعی دنبال کنند و نمونه کار های شما را مشاهده کنند. آیکون های Facebook، Twitter و Instagram را از Iconfinder دانلود کنید و در سند فتوشاپ خود درگ کنید، نام آنها را تغییر دهید بطوری که سریع قابل شناسایی باشند و آنها را در بالا سمت راست بعد از آخرین خط راهنمای عمودی قرار دهید. بعد از این کار، بر روی لایه آیکون های کلیک راست کنید و گزینه ی Blending Options را انتخاب کنید و بعد گزینه ی Color Overlay انتخاب کنید و رنگ سفید ffffff# به آن اختصاص دهید. همین روال را با بقیه آیکن ها هم انجام دهید.

apply-color-overlay

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

place-icons

 

مرحله ششم

بیایید بخش header را به پایان برسانیم. ما یک تصویر زیبا داریم که می توانیم یک پیام کوتاه ساده را در عکس قرار دهیم، تا بازدید کننده موضوع وب سایت را تشخیص دهد.

ابزار تایپ (Horizontal Type Tool (T را انتخاب کنید و با استفاده از اندازه 36px فونت (Lato (Black دو جفت کلمه را وارد کنید. در این طرح از “HELLO I’M JONATHON” را انتخاب کرده ام. آنگاه درست در خط بعد با یک فونت کوچکتر خلاصه ای دربارده خود یا کار خود تایپ کنید که برای بازدید کننده جذابیت داشته باشد. در این طرح من از اندازه 16px فونت (Lato (Regular استفاده کرده ایم.

مطمئن شوید که ارتفاع خط به اندازه ی کافی مناسب است، تا متن شما فضای کافی برای نفس کشیدن داشته باشد. در آخر، نوشته های خود را در وسط header قرار دهید.

draw-a-rectangle

 

طراحی بخش تصاویر

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

 

مرحله اول

بیایید ابتدا پس زمینه را برای این بخش تغییر دهیم. بر روی فلش کوچک در کنار گروه Header کلیک کنید تا بسته شود و بعد گروه Photos را باز کنید. پس از آن، ابزار (Rectangle Tool (U را برداشته و یک مستطیل تقریبا خاکستری را رسم کنید. به عنوان مثال رنگ eeeeee# با اندازه ی 1200x880px.

 

مرحله دوم

حال یک خط جدید اضافه کنید که کار شما را توصیف می کند. این کار به سادگی با نوشتن “Latest Work” یا “LATEST PHOTOS” انجام می شود. نوشته باید قابل خواندن باشد، به همین دلیل من از خاکستری 9b9b9b# با فونت (Lato (Bold اندازه 12px استفاده کرده ام. لطفا توجه داشته باشید که فاصله حروف بسیار قابل توجه است که (270) فقط برای تبدیل عنوان به سبک خاص استفاده می شود و در متن های ساده کاربردی ندارد، بار دیگر فضای کافی به عنوان خود دهید و 80px آن را به پایین تصویر قرار دهید.

photos-title

 

 

مرحله سوم

عالیست! حالا ما آمده این هستیم که تصاویر جذابی را به مجموعه نمونه کارهای خود اضافه کنیم. ابتدا یک گروه جدید به نام Photo ایجاد کنید. بعد از آن باید تصمیم گیری کنید که چه تعداد تصویر را در هر سطز می خواهید نمایش دهید. من تصمیم گرفتم که با چهار تا تصویر در هر سطر شروع کنم، بنابراین قبل از شروع به کمی حساب کتاب ریاضی احتیاج داریم.

عرض وب سایت ما 1000px است، بنابراین آن را با 4 تقسیم می کنیم و به ما برای هر عکس 250px فضا می دهد، اما ما همچنین نیاز داریم که اطراف عکس ها هم فضای کافی داشته باشد، اجازه دهید برای هر کدام 20px در نظر بگیریم. بنابراین عرض تصویر نهایی بصورت زیر خواهد بود.

ابزار (Rectangle Tool (U را برداشته و، با نگه داشتن دکمه Shift، یک مستطیل با اندازه 235x235px رسم کنید. بعد از آن یک عکس از خوراک اینستاگرم یا تصاویری از unsplash.com یا getrefe.tumblr.com انتخاب کنید. آنها را به سند فتوشاپ خود درگ کنید و در قسمت بالایی مستطیل قرار دهید. آنگاه، کلید Alt را نگه داشته، و یک Clipping Mask ایجاد کنید و با استفاده از کلید های ترکیبی CTRL+T تصویر را به دلخواه تغییر اندازه دهید، همانطوز که قبلا این کار را انجام دادیم.

drag-photo

 

ابزار (Horizontal Type Tool (T را انتخاب کنید و عددی را به دلخواه وارد کنید، من از اندازه ی 13px با فونت Montserrat استفاده می کنم و 15px فضا برای جهت های چپ و پایین نوشته استفاده کرده ام.

 

write-down-likes

 

حال ابزار (Rectangle Tool (U را انتخاب کنید و یک مستطیل سفید در زیر آن رسم کنید. آنگاه با استفاده از ابزار (Horizontal Type Tool (T خلاصه ای درباره ی تصویر خود که در اینستاگرم استفاده کرده اید را بنویسید، نوشته همچنین می تواند شامل هشتگ و تاریخ انتشار پست در خط جدید باشد. فونتی که برای این آموزش استفاده کرده ام Montserrat با 12px با رنگ خاکستری 808080# است.

توجه: مطمئن شوید که شما مطابق با فاصله خود هستید، اگر شما 15px را برای اطراف تعداد لایک ها انتخاب کرده اید، همین کار را برای قسمت توضیحات هم اعمال کنید.

draw-a-rectangle-and-write-description

 

مرحله پنجم

کار ما با آیتم عکس تمام شد و حالا وقت آن است که تصاویر بیشتری را به کار خود اضافه کنیم. گروه Photo را بسته و با استفاده از CTRL+J از گروه، گروه تکراری دیگری درست کتید. یا با راست کلیک کردن بر روی گروه گزینه ی Duplicate Group را انتخاب کنید. بعد از duplicate کردن تعدادی عکس، می توانید آنها را به عنوان یک grid سازماندهی کنید. در این طرح برای هر عکس 20px فاصله تعریف کرده ام و عکس ها متفاوت از وب سایت های unsplash.com و getrefe.tumblr.com گلچین کرده ام.

duplicate-photos

 

طراحی بخش تماس

در این بخش ما یک پیام ساده و تماس با ما و همچنین اطلاعات کپی رایت عمومی را قرار می دهیم.

 

مرحله اول

گروه Photos را با کلیک بر روی فلش کوچکی که کنار نام آن وجود دارد گروه را ببندید و بجای آن گروه Contact را باز کنید. بعد از آن ابزار (Horizontal Type Tool (T را انتخاب کنید و برای این بخش یک عنوان بزرگ ایجاد کنید، در این طرح من از “GET IN TOUCH” را انتخاب کرده ام. به جهت بالا فضای زیادی را اختصاص دهید و نوشته ی مختصری را وارد کنید. من از رنگ #565d64 با فونت (Lato (Black با اندزه 36px را برای عنوان و فونت (Lato (Regular با اندازه 16px برای توضیحات انتخاب کرده ام.

write-section-headline

 

مرحله دوم

حال به دکمه ای نیاز داریم که کاربر با کلیک بر روی آن عمل تماس را انجام دهد. در این آموزش اجازه دهید از یک دکمه ساده استفاده کنیم. با استفاده از ابزار (Rectangle Tool (U یک مستطیل رسم کنید و نوشته ای را درون آن تایپ کنید. مطمئن شوید که فضای کافی در بالای دکمه وجود دارد تا طرح شما تمیز و متعادل باشد.

 

 

contact-cta

مرحله سوم

در آخر در پایین نمونه کارها اجازه دهید یک خط کپی رایت عمومی قرار دهیم. قبل از این کار، ابزار (Line Tool (U انتخاب کنید و یک خط ظریف افقی با رنگ خاکستری #e0e0e0 در سراسر سند با فاصله 90px از پایین صفحه رسم کنید. بعد از این کار کپی رایت را وارد کنید. در این طرح من از فونت (Lato (Bold با اندازه 12px و فاصله ی 270 و رنگ خاکستری تیره #9b9b9b استفاده کرده ام.

 

 

copyright-line

 

پایان نسخه وب

شما نسخه ی وب از طرح نمونه کار ها را به پایان رساندید، حالا به شما نشان می دهم که چطور به سرعت این طرح را به نسخه ی موبایل تبدیل کنید.

 

طراحی برای نسخه موبایل

 

مرحله اول

ابتدا یک سند جدید به اندازه 320x2100px ایجاد کنید. سه خط راهنما عمودی به فاصله های 20px و 150px و 300px رسم کنید، در دو طرف حتما فاصله ایجاد کنید. بعد از این کار تمام گروه هایی که قبلا در سند نسخه وب ساخته بودیم را انتخاب و به داخل سند جدید انتقال می دهیم.

drag-groups-to-new-document

مرحله دوم

حالا گروه Header را باز کنید، لوگو را با استفاده از ابزار (Move Tool (V انتخاب کنید و به سمت راست حرکت دهید تا وقتی که در طرح باریک جدید ما قابل مشاهده باشد. توجه داشته باشید که بعد از اولین خط راهنما لوگو را قرار دهید. بعد از این کار آیکون های شبکه های اجتمایی را پیدا کنید و به سمت چپ انتقال دهید.

 

 

move-layers

 

مرحله سوم

حالا نوبت به وقق دادن نوشته ی وسط می رسد. ابزار (Horizontal Type Tool (T را برداشته، فونت نوشته را کم کنید تا پیام وسط بین خطوط راهنمای اول و سوم قرار گیرد. ارتفاع آنها را همان طور که قبلا به حوبی انجام می دادید تغییر دهید.

 

 

adapt-main-messaging

 

مرحله چهارم

گروه Photos را باز کرده و عنوان “LATEST PHOTOS” را همانطور که در نسخه ی موبایل به فضای کمتری نیاز داریم به سمت بالا حرکت دهید. بعد از این کار گروه Photo را پیدا کرده و آن را بین خطوط راهنمای عمودی قرار دهید. آنگاه گروه را گشوده، بر روی شکل مستطیلی پس زمینه کلیک کنید، کلید های ترکیبی CTRL+T را زده و عرض آن را به 280px تغییر دهید. همین کار را برای مستطیل عکس ها تکرار کنید. در آخر، تصاویر را در یک ستون مرتب کنید و آنها را بین خطوط رانا قرار دهید.

 

 

resize-the-rectangle

 

مرحله پنجم

همانطور که می مشاهده می کنید قسمت تصاویر در نسخه ی وب بلندتر است، بنابراین تنظیم پس زمینه مورد نیاز است. لایه ی پس زمینه ی عکس ها را پیدا کرده و دکمه های CTRL+T را فشار دهید بتوانید تغییر اندازه دهید، آن را کمی بلندتر کنید و فضای پایین را هم بیشتر کنید.

 

 

resize-background-layer

مرحله ششم

در آخر نیاز داریم که بخش تماس با ما را تنظیم مجدد کنیم، بنابراین پیام را بین خطوط راهنما قرار دهید و به سادگی آن را تراز وسط کنید. گروه Contact را گشوده و با استفاده از ابزار (Horizontal Type Tool (T پیغام را به خط های جدید شکسته و با خطوط راهنما فیت کنید. مطمئن شوید فاصله ی کافی بین آنها وجود دارد.

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

 

 

rearrange-contact-section

mobile-instagram-portfolio-preview

 

تبریک می گویم!

همـــــین! نسخه موبایل از نمونه کارها بر اساس اینستاگرم را هم توانستیم درست کنیم. امیدواردم این پست چیز جدید را به شما یاد داده باشد و مهارت کافی به دست آورده باشید که در آینده چیزهای شگفت انگیز ایجاد کنید. در پست بعدی خواهیم دید که چطور این طرح را با استفاده از فریم ورک محبوب Bootstrap به وب سایت واقعی تبدیل کنیم. اگر آشنایی کافی با bootstrap را ندارید، پیشنهاد می کنم پست زیر را مطالعه کنید.