طراحی با نور و سایه

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

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

استفاده از نور و سایه در طراحی : فواید و ضررها

توجه به رابطه ی بین نور و سایه ها در زندگی واقعی، به ما الهاماتی درباره ی اینکه چگونه طراحی خود را به زندگی واقعی نزدیک کنیم. به جز مواردی که شما یک پرینتر سه بعدی در اختیار داشته باشید، بسیاری از ما، تنها قادر هستیم که طراحی ای دو بعدی انجام دهیم. اما همه ی ما، اشیاء را به صورت سه بعدی می بینیم. این مساله گاهی یک قطع ارتباط بصری را بین آن چه که ما هر روز در زندگی واقعی خود می بینیم، و آنچه که بر روی کاغذ یا صفحه نمایش، مشاهده می کنیم، ایجاد می کند. اضافه کردن المان های سایه و نور، در طراحی، به شما کمک می کند تا برای پر کردن این فاصله پل بزنید و به طراحی ۲D خود، ظاهری تقریبا ۳D و واقعی بدهید.

طراحی با نور و سایه

اما( که این اما بسیار تاثیرگذار است)، اگر شما زمانی را درون نت بگذرانید، مطمئناً متوجه خواهید شد که افکت های سایه و روشن، می توانند بیش از اندازه استفاده شوند. همانطور که یکی از طراحان در پست وبلاگ خود ” اعتراف اعتیاد به افکت سایه گذاری”، بیان کرده است، در دنیای مدرن ما، که تمام افکت ها به سادگی بر روی طراحی وارد می شود، به کار بردن زیاد از حد یک افکت بر روی افکتی دیگر، بدون اینکه درباره ی آن فکر کنید، بسیار ساده است.

بگذارید نگاهی به فواید و معایب آن بپردازیم:

سایه و روشن می تواند، به طراحی شما، عمق، ابعاد، پرسپکتیو، واقع گرایی، و زیبایی بصری را اضافه کند و این موارد می تواند، نگاه بیننده را به طراحی جلب کرده و باعث می شود که در صفحه یا اسکرین، جلوه بهتری داشته باشد.
اما این نوع طراحی، به سادگی به انحراف کشیده می شود، افکت های زیاد از حد شاید باعث شکست طراحی نشوند، اما آن را آماتورانه و کلیشه ای نشان می دهد.
در مجموع، راز استفاده از سایه و روشن، به صورت هوشمندانه، در نظر داشتن دو موضوع در ذهن است: هدف و ظرافت. در ابتدا، از اینکه هر افکتی که استفاده می کنید، یک هدف عملکردی و خاص داشته باشد و پروژه شما را بتواند معرفی کند، مطمئن شوید؛ سپس، از روش ” هرچه کمتر، بهتر ” برای به کاربردن این نوع افکت در طراحی خود استفاده کنید. اگر شما از افکتی که در برنامه طراحی شما وجود دارد استفاده می کنید، تنظیمات دیفالت آن، معمولاً بسیار شدید و غیر واقعی است( مخصوصاً برای سایه ها)؛ بر آن ها تکیه نکنید، باید آن ها را نرم تر، روشن تر و ظریف تر کنید.

سایه و روشن چگونه کار می کند: مرور خلاصه وار

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

طراحی با نور و سایه

در دیاگرام بالا، من به چندین ترم اشاره کرده ام که در اینجا به خلاصه به آن ها می پردازم:

• منبع نور: اگر شما سایه ها و هایلایت ها را می بیند، پس حتماً منبع نوری وجود دارد. این به نظر واضح می رسد، اما در بسیاری از پروژه های طراحی (به غیر از تصویرسازی هایی که شامل، خورشید، ماه و لامپ هستند) منبع نور مشخص نیست. بنابراین، اگر شما یک منبع نور خیالی را در محلی از طراحی خود در نظر بگیرید و افکت ها را براساس حضور آن بر طراحی وارد کنید، نتیجه کار شما بیشتر واقعی خواهد شد، نسبت به زمانی که افکت ها را به صورت رندم بر آن وارد کنید.
• هایلایت: محلی است که نور بر آن می تابد، پس آن قسمت از المان، روشن تر خواهد بود ( نزدیک ترین و روبروی منبع نور)
• سایه ها / هسته ی سایه : تیره ترین قسمت از المان مد نظر ( دورترین مکان به منبع نور). اما سایه ها تنها رنگ تیره ی رو ی طراحی نیست، بلکه در میزان تیرگی متفاوت هستند. تیره ترین بخش از سایه، محلی که المان کاملاً در مقابل منبع نوری قرار دارد، را هسته ی سایه می نامند.
• سایه ی افتاده شده روی زمین: برخلاف سایه ی هسته ای (که بر روی المان قرار دارد) این نوع سایه توسط المان ایجاد می شود. زمانی که المان در مقابل نور قرار می گیرد، سایه ای بر روی سطحی که المان بر آن قرار دارد، ایجاد می کند. جهت این سایه، با جهت منبع نوری یکی است، فقط در طرف مخالف المان می افتد.

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

۰۱. از رنگ در طراحی با نور و سایه برای ایجاد عمق استفاده کنید.

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

طراحی با نور و سایه

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

۰۲. گرادیانی به پس زمینه اضافه کنید.

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

حال، گرادیان ها، شاید شما را به سمت پس زمینه های رنگارنگ دهه ۹۰ میلادی ببرد، که مانع از خواندن متون می شدند، اما آن گرادیان ها، اشتباه بودند. وقتی که گرادیان ها، می توانند تغییرات رنگی متفاوتی را به طرح اضافه می کند، سایه های نرم تر و محو تری را ایجاد می کند، یا درخشش نور را در منطقه ای از طراحی، فراهم می کند.

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

طراحی با نور و سایه

۰۳. از هایلایت ها برای جلب توجه دیگران استفاده کنید.

درخشش نوری در کنار المان ها، همیشه نگاه چشم ها را به خود جلب می کند. در طراحی، هایلایت ها مانند یک منبع نوری نرم، عمل می کند، که وضوح المان خاصی را بیشتر می کند، علاوه بر اینکه ظاهری واقع گرایانه، همانطور که در مبحث قبل به آن پرداخته ایم، به آن می دهد. اگر شما می خواهید، چندین المان را هایلایت کنید، منبع نوری خیالی را فراموش نکنید و هایلایت خود را منسجم نگه دارید.
نگاهی به سادگی هایلایت در لوگوی “۸۰۱” در بسته بندی محصول، در زیر بیاندازید. این هایلایت ها، خطوطی رنگی هستند که کمی روشن تر از رنگ اولیه اعداد هستند، اما همین خطوط، وضوح و زیبایی بصری بیشتری را به فاصله کانونی طراحی می دهد.

طراحی با نور و سایه

۰۴. سایه سازی

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

طراحی با نور و سایه

۰۵. سایه های برجسته و سایه های افتاده بر سطح

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

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

طراحی با نور و سایه

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

۰۶. تنظیم کدری

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

۰۷. برای خلق متون برجسته، از سایه و روشن ها استفاده کنید.

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

طراحی با نور و سایه

۰۸. از سایه ها برای ایجاد بالا و پایین رفتن طراحی متون استفاده کنید.

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

۱) بالا آمده : بالا آوردن و برجسته کردن متن، یکی از تکنیک های چاپ است که ویژگی طراحی را به صورت فیزیکی (معمولاً متون) در بالای سطح کاغذ (یا هر ماده دیگری) بالاتر می برد. این روش معمولاً با یک مهر فلزی صورت می پذیرد. شما می توانید این افکت را به صورت دیجیتالی، با ایجاد کردن سایه ها در مناطق خاص (خارج از مرز شکل های کلمات) و هایلایت های (بر روی کلمات)، کپی کنید.

طراحی با نور و سایه

۲) پایین تر رفته : مردم از لغات مختلفی برای توصیف متونی که حکاکی شده اند یا به درون سطح فرو رفته اند، استفاده می کنند. متون چاپی یکی از شایع ترین آن هاست که یک تکنیک چاپ است که از صفحات فلزی برای وارد کردن یک طراحی در یک کاغذ ضخیم و نرم (با یا بدون جوهر) استفاده می کند. اما این اسم معمولا برای افکت های دیجیتالی نیز که همین ظاهر را کپی می کنند، کاربرد دارد، مانند طراحی لوگوی زیر:

طراحی با نور و سایه

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

۰۹. طراحی فلت را در نظر بگیرید.

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

• رنگ: با استفاده از واریاسیون یا گرادیان رنگ ها، می توانید حس بعد با سایه/روشن را در حالی که همچنان از لحاظ تکنیکی بر طراحی فلت وفادار مانده اید، به آن اضافه کنید.
  نمونه ی صفحه ی ۴۰۴ از رنگ های تیره تر و روشن تر لایه ها، برای خلق ظاهری با عمق، استفاده کرده است.

• 

  طراحی با نور و سایه

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

طراحی با نور و سایه

۱۰. سایت، ظاهری قابل کلیک کردن خلق کنید.

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

طراحی با نور و سایه

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

مرور کنیم..

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

حال، از این تکنیک در طراحی خود استفاده کرده و تجربه کسب کنید.