آموزش طراحی وبسایت از بافت کاغذی در فتوشاپ

در این آموزش طرحی از بافت کاغذی را از صفر در فتوشاپ ایجاد میکنیم سپس با استفاده از بافت کاغذی یک وبسایت طراحی می کنیم.

بخش 1- ساخت بافت کاغذی

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

1- یک برگ کاغذ را اسکن کنید
    یک برگ کاغذ را که بافت مناسبی دارد اسکن کنید و استفاده کنید

2- استفاده از طرحهای دیگران
    طرحهای زیاد از بافتهای کاغذی در اینترنت موجود است که میتوانید استفاده کنید
3- طراحی بافت کاغذی در فتوشاپ
    این روشی است که در این آموزش به آن خواهیم پرداخت

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

گام 1

یک سند جدید در فتوشاپ به عرض 1200 پیکسل و ارتفاع 900 پیکسل ایجاد کنید. پس زمینه را با یک رنگ بژ #e8e8e2 پر کنید.

گام 2

یک لایه جدید بسازید. رنگ پیش زمینه را #979a8f و رنگ پس زمینه را  #cfd1c5 انتخاب کنید.

از منو Filter > Render > Clouds را انتخاب کنید.

گام 3

از منو Filter > Artistic > Palette Knife را انتخاب کنید. تنظیمات را مانند تصویر بالا انجام دهید. افکت Palette Knife جلوه برجسته بودن به طرح میدهد و در نهایت طرح به صورت یک کاغذ مچاله شده به نظر میرسد.

گام 4

حال با انتخاب Filter > Noise > Add Noise افکت نویز به طرح اضافه می کنیم. تنظیمات را مانند تصویر انجام دهید. این افکت حالتی خش دار را به طرح میدهد

گام 5

حال لایه نویز دار و مچاله شده را انتخاب کنید و مود آن را به Multiply تغییر دهید و شفافیت را بر روی %30 تنظیم کنید.

گام 6

یک لایه جدید در بالای لایه ها ایجاد کنید و رنگ پیش زمینه را #42433e و رنگ پس زمینه را  #cfd1c5 انتخاب کنید. این رنگها تیره تر از رنگهایی هستند که در مرحله قبلی انتخاب کردیم که باعث ایجاد کنتراست بیشتری در طرح می شود. حال از منو Filter > Render > Clouds انتخاب کنید.

گام 7

مجددا از منو Filter > Artistic > Palette Knife را انتخاب کنید.

گام 8

blending mode لایه جدید را بر روی overlay و شفافیت را بر روی %60 قرار میدهیم. با این روش تصویر عمق بیشتری میگیرد. به این ترتیب بافت کاغذی ما تکمیل میشود.

گام 9

برای این آموزش بافت روشن عالیست اما میتوانید با ابزارهای blendign فتوشاپ تنوع های  دیگری را اعمال کنید بعنوان مثال این طرح کاغذی قهوه ای تیره

گام 10

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

1. اولین لایه بافت مچاله/نویزدار را انتخاب کنید و از منو  Filter > Texture > Texturizer و convas را انتخاب کنید و تنظیمات %75 و 2 را انجام دهید
2. دومین لایه بافت مچاله/نویزدار را انتخاب کنید و همان فیلترها را اعمال نمایید.
3. حال دومین لایه را کپی کنید و آن را 90 درجه بچرخانید. مود blending آن را بر روی Overlay و %60 قرار دهید
4. یک لایه جدید در بالای لایه ها ایجاد کنید. سپس آن را با رنگ سفید پر کنید #ffffff
5. از منو Filter > Texture > Texturizer را انتخاب کنید و اینبار convas را انتخاب کنید و %200 و 16 و مود لایه را بر روی overlay و %20 تنظیم کنید
6. یک لایه جدید دیگر در بالای تمام لایه ها ایجاد کنید و با رنگ سفید پر کنید. اینبار blending mode لایه را بر روی Color و %53 تنظیم کنید تا بافت ما کمی روشنتر شود.

نکته های آخر در مورد بافت کاغذی

حال یک بافت کاغذی دارید که میتوانید آن را به یک پس زمینه کاشی تبدیل کنید

برای این آموزش از اولین بافت کاغذی ساخته شده در مرحله 8 استفاده می کنیم.

بخش 2 - ساخت چیدمان وبسایت

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

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

گام 13

ابتدا منطقه کاری خود را طراحی می کنیم. دو خط راهنما به فاصله 100 پیکسل و 1100 پیکسل طراحی می کنیم. به این ترتیب فضایی به اندازه 1000 پیکسل خواهیم داشت که برای طراحی المانهای صفحه وب عالیست. 

سپس یک لایه جدید ایجاد می کنیم و یک باکس بزرگ به رنگ سفید ایجاد می کنیم.

گام 14

شفافیت باکس سفید را بر روی %25 قرار میدهیم.

حال میخواهیم باکس را کمی جذاب تر کنیم. براش های  GRUNG بسیاری در اینترنت وجود دارد که میتوانید از آنها استفاده کنید.اما در این مرحله ما از یکی از براشهای استاندارد فتوشاپ استفاده می کنیم. این براش را میتوانید در پالت براشهای فتوشاپ با عدد 60 پیدا کنید.

اگر این براش براش شما ظاهر نشد بر روی فلش کوچک در بالای پنل براشها کلیک کنید و Wet Media Brushes را انتخاب کنید و بر روی Append کلیک کنید تا براش به پنل شما اضافه شود

گام 15

ابزار Eraser Tool (E) را انتخاب کنید و دور تا دور باکس را مانند شکل با براشی که مرحله قبل انتخاب کردید پاک کنید.

گام 16

در زیر باکس سفید یک لایه جدید ایجاد کنید. ابزار Radial Gradient (G) را انتخاب کنید و یک گرادیانت با طیف رنگی سفید به سمت transparent مانند تصویر ایجاد نمایید. در این قسمت در مراحل بعدی لوگوی سایت را قرار خواهیم داد. مود لایه را بر روی Overlay و %70 تنظیم کنید

گام 17

حال لوگوی سایت را اضافه می کنیم. لوگوی ما تنها عبارتی است که با یک فونت زیبا نوشته شده است. در این تمرین از فونت Egyptian710 BT استفاده کردیم. این فونت تقریبا شناخته شده است و برای کار ما مناسب است زیرا ظاهری ناهموار دارد و حرف بزرگ آن ضخیم تر از حروف کوچک هستند و شبیه به حروف ماشین تحریر است که با بافت کاغذی ما همخوانی دارد.

گام 18

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

کلمه Folio با فونتی دلخواه مانند HumstSlab712 Blk تایپ کردیم و رنگ آن را #c5c6ba قرار دادیم

گام 19

حال blending mode لایه را بر روی Colour Burn و %70 قرار دهید و یک حاشیه به صخامت 1 پیکسل مانند تصویر برای آن ایجاد کنید. برای رنگ حاشیه از یک Pattern استفاده کنید.

شفافیت حاشیه را بر روی %36 تنظیم کنید blending mode را بر روی Multiply قرار دهید . با این تنظیمات حاشیه حالت محوی به خود میگیرد و با سایر المانها به خوبی ترکیب می شود.

گام 20

حال واترمارک را در پشت لوگو قرار دهید

گام 21

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

گام 22

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

گام 23

حال در زیر خط یک لایه جدید ایجاد کنید و یک مستطیل به ضخامت 3-4 پیکسل به رنگ قهوه ای مانند تصویر بکشید.

گام 24

مود باکس قهوه ای را Multiply قرار دهید و شفافیت را بر روی %5 تنظیم کنید . با این روش سایه ای برای خط جدا کننده ایجاد می شود

گام 25

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

گام 26

شفافیت باکس سفید را بر روی %50 درصد تنظیم کنیم و با براش نامنظمی که قبلا استفاده کردیم قسمت بالای آن را مانند تصویر پاک کنید تا ظاهری هنری و زیبا به خود بگیرد

گام 27

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

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

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

گام 28

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

گام 29

حال چند محتوا به صفحه اضافه می کنیم. 

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

برای متنهای معمولی میتوانید از فونت Cambria استفاده کنید که یک فونت Vista است. برای کاربرانی که فونت Vista ندارند میتوانید در CSS تعریف کنید که بجای آن از فونت Georgia استفاده شود. اگر خودتان فونت Vista را ندارید میتوانید از اینترنت تهیه کنید. فونتهای زیبایی وجود دارند که میتوانید استفاد کنید مانند فونت Calibri .

گام 30

حال باید پنل اصلی سایت را بسازیم. با استفاده از ابزار Rounded Rectangle Tool (U) یک مستطیل بزرگ به رنگ قهوه ای تیره #1e1a19 بسازید و شعاع گوشه ها را 5 پیکسل تنظیم کنید.

گام 31

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

گام 32

حال بر روی گوشه سمت چپ بالا زوم کنید و با ابزار Polygonal Lasso Tool (L) و پایین نگهداشتن دکمه Shift یک انتخاب اریب مانند شکل ایجاد کنید و قسمت انتخاب شده را با فشار دادن دکمه Delete پاک کنید.

گام 33

حال در یک لایه جدید یک مربع کوچک به رنگ قهوه ای روشنتر  #352f2b ایجاد کنید. سپس بر روی مربع یک انتخاب اریب ایجاد کنید نیمی از مربع را مانند شکل پاک کنید. مربع را در گوشه باکس بزرگ طوری قرار دهید که از لبه اریب گوشه باکس 1 پیکسل فاصله داشته باشد مانند تصویر

گام 34

یک لایه جدید ایجاد کنید بر روی گوشه بالا سمت راست باکس بزرگ زوم کنید. میخواهیم طرح زبانه تب های سایت را ایجاد کنیم. برای این کار از ابزار Pen tool به همراه چند کلیک دقیق استفاده می کنیم. در تصویر بالا تمام لایه های پس زمینه را خاموش کرده ایم تا ترسیم واضح تر به نظر برسد. به ترتیب زیر شکل را ایجاد کنید

از اولین نقصه سمت چپ شروع کنید. با ابزار Pen tool در محل اولین نقطه کلیک کنید. دکمه ماوس را نگهدارید و کمی جابجا کنید. اگر پس از کلیک کردن دکمه ماوس را نگهدارید دسته های کنترکننده نقطه نمایان میشوند حال ماوس را کمی در جهت افقی جابجا کنید در همین حین دکمه شیفت را نگهدارید تا دسته های نقطه بصورت افقی جابجا شوند.
برای نقطه دومین نقطه نیز به همین صورت عمل کنید. در محل نقطه دوم کلیک کنید و دکمه ماوس را نگهدارید و کمی جابجا کنید تا دسته نقطه ظاهر شود. دکمه shift را نگهدارد تا دسته در جهت افقی جابجا شود. 

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

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

نقطه پنجم را نیز تنها با یک کلیک ایجاد کنید

در حین ترسیم هرگاه احساس کردید محل نقطه صحیح نیست با فشار دادن Ctrl+Z به عقب برگردید. در صورتی که بخواهید بیشتر از یک مرحله به عقب برگردید دکمه Alt+Ctrl+Z را فشار دهید

گام 35

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

آخری نقطه را که انتخاب کردید کلیک راست کنید و Make Selection را انتخاب کنید تا ترسیم ایجاد شده تبدیل به انتخاب شود.

گام 36

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

گام 37

حال لایه تب را کپی کنید . لایه تب جدید را در زیر قبلی قرار دهید تا رنگ قهوه ای تیره در بالای بقیه تبها به نظر برسد. بر روی تب جدید راست کلیک کنید و Blending Options را انتخاب کنید و یک Colour Overlay به آنها اعمال کنید و یک رنگ نارنجی مایل به قرمز زیبا #cc5630 به آن نسبت دهید

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

کلید Ctrl را نگهدارید و تب اول را انتخاب کنید . ابزار Rectangular Marquee Tool را انتخاب کنید و فلش سمت راست را چند بار فشار دهید تا اینکه ناحیه انتخاب شده بر روی تب نارنجی قرار گیرد. علت استفاده از ابزار marquee tool این بود که میخواستیم یک قسمت انتخاب شده را جابجا کنیم. اگر به جای این روش تنها از فلشها برای جابجای استفاده می کردیم تمام پیکسلهای تب جابجا میشدند. هر دو روش را امتحان کنید و نتیجه را ببینید.

گام 38

حال بین دو لایه تب یک لایه جدید ایجاد کنید و قسمت انتخاب شده را با رنگ نارنجی تیره تر #b44724 پر کنید 

کلید Ctrl را نگهدارید و بر روی لایه تب نارنجی کلیک کنید.حال دکمه Ctrl+Shift+I را انتخاب کنید تا انتخاب برعکس شود. بر روی لایه وسطی کلیک کنید و Delete را فشار دهید. با این روش فقط قسمت نارنجی تیره که بر روی تب نارنجی قرار گرفته باقی می ماند.

گام 39

همانطور که در تصویر می بینید نوعی سایه بر روی تب دوم ایجاد کرده ایم

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

گام 40

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

گام 41

حال یک قسمت ویژه در سایت را طراحی می کنیم. یک باکس سفید رنگ ایجاد کنید. در زی آن در لایه ای جدید با استفاده از Polygonal Lasso Tool (L)  یک ناحیه مستطیل شکل نامنظم بزرگتر از باکس سفید انتخاب کنید و آن را با رنگ قهوه ای تیره پر کنید #0e0c0c

گام 42

در سمت راست مستطیل یک پاراگراف متنی اضافه کنید. دو عنوان را به رنگ قهوه ای تیره تر تنظیم می کنیم تا حالت ادغام با رنگ پس زمینه را داشته باشند زیرا این عنوانها اهمیت زیادی ندارند. بقیه عناوین و متن اصلی چون مهم هستند باید به چشم بیایند برای همین برای آنها از رنگهای روشن تری مانند بژ روشن استفاده می کنیم.

همچنین میتوانید از radial gradiant با طیف رنگی از سفید به سمت بژ روشن برای زیباتر کردن طرح استفاده کنید

گام 43

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

معمولا براشها و تصاویر بزرگتر از اندازه ای که میخواهیم هستند و ممکن است بعد از استفاده در صفحه ظاهر واضحی نداشته باشند برای همین بعد از استفاده از آنها در صفحه بیاد داشته باشید که با استفاده از Filter > Sharpen > Unsharpen Mask تصاویر را واضح تر کنید.

طرح نهایی

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

سخن آخر

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