کاغذ دیواری برای گوشی شما با نور نئون. ویژگی های رنگ های نئون در طراحی وب سایت و ایجاد در فتوشاپ

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

نتیجه

مرحله 1

بیایید با ایجاد یک لایه ساده و دادن سبک لایه شیب شعاعی به آن شروع کنیم. نورها نباید خیلی روشن باشند. در مورد ما، اینها #303e4a و #151515 هستند. واقع گرایی اثر به این بستگی دارد.

گام 2

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

مرحله 3

حالا روی لایه لوگو دوبار کلیک کنید تا سبک های لایه زیر را به آن بدهید.

بیایید با Color Overlay شروع کنیم. استفاده کنید رنگ سفید. اگر متوجه شده اید، مرکز لوله های نئون همیشه سفید است. این درخشان ترین بخش است، چیزی که ما سعی داریم آن را منتقل کنیم.

مرحله 4

بیایید یک سبک Bevel & Emboss اضافه کنیم. این سبک به ما کمک می کند جلوه ای شیشه ای ایجاد کنیم. این مهمترین بخش نیست، زیرا شیشه عملاً در لوله های نئون نامرئی است، اما به ما کمک می کند جلوه حجمی را بدست آوریم. پارامترها را مطابق شکل زیر مشخص کنید.

مرحله 5

سبک Inner Shadow را اضافه کنید. در اینجا رنگی را انتخاب می کنیم که می خواهیم جلوه نئونی خود را ببخشیم. در مورد ما فیروزه ای روشن است.

مرحله 6

سبک Inner Glow نیز همین هدف را دنبال می کند. به لطف این سبک، ما یک انتقال زیبا بین رنگ های فیروزه ای و سفید خواهیم داشت.

مرحله 7

سبک Outer Glow جلوه ای درخشان ایجاد می کند. او مسئول نحوه قرار گرفتن نور لوله های نئون بر پس زمینه و سایر اشیاء زیر لوگو است. ما از بزرگترین اندازه ممکن و حالت ترکیبی Overlay و همچنین از همان سایه فیروزه ای استفاده می کنیم.

مرحله 8

سبک Drop Shadows یک انتقال درخشان ایجاد می کند. برای این کار از حالت های ترکیبی Vivid Light یا Color Dodge استفاده کنید. در مثال ما، دو سبک لایه Drop Shadows را به طور همزمان اعمال کردیم. اولی به عنوان یک درخشش خارجی عمل می کند و دومی نور را به پس زمینه منعکس می کند. بسته به زاویه ای که می خواهید لوگو را نشان دهید، کمی نزدیک تر یا دورتر خواهد بود.

مرحله 9

در اینجا چیزی است که شما با آن به پایان می رسانید:

مرحله 10

حالا بیایید یک بافت بتن به پس زمینه اضافه کنیم. این کمی آن را تیره می کند.

مرحله 11

همچنین می توانید چند عنصر کوچک مانند سیم یا بست اضافه کنید. زیاده روی نکنید. بگذارید همه چیز تا حد امکان ساده باشد.

مرحله 12

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

رنگ های نئونی... خیلی روشن، شاد، غیرعادی... همزمان آزاردهنده و دلنشین آدمی. با کمال تعجب، در برابر پس زمینه استانداردهای طراحی وب، استادان هنوز از آنها در ترکیبات و تغییرات مختلف در پروژه های خود استفاده می کنند. با این حال، کار با رنگ‌های نئون بدون تأثیر بر طراحی کلی دشوار است. بله، آنها برای لوگوها، نمادها، عناصر رابط کاربری در برنامه ها، روی پوسترها، هنر عالی هستند، اما اگر مشکلات و ویژگی های اصلی را درک نکنید، طراحی وب دشوار می شود.

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

به طور کلی، بیایید سعی کنیم تبدیل شویم نینجاهای نئونی!

سایه لیمویی

سبز لیمویی نماینده روشن رنگ نئون (بدون اثر مربوطه) است که سایه آن زرد مایل به سبز است، اما هنوز سبز روشن نیست.

کد هگز: #32cd32

ویژگی رنگ این است که وقتی با پس زمینه تیره ترکیب می شود، یک جلوه نئون واقعی به دست می آید. جالب به نظر می رسد و می تواند بازدیدکنندگان را به سایت جذب کند. این ساده ترین راه برای اضافه کردن نئون به طراحی وب خود بدون سنگین کردن کل پروژه است. به عنوان نمونه آب و هوا، limegreencreative، مرورگر QQ (برای مک)، newKIS، Craftedbygc، Nvidia. همه آنها تا حدی از ترکیبی از پس زمینه سبز روشن و تیره استفاده می کنند، اما جلوه زیبا و حتی تست شده است.

رنگین کمان نئونی

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

تصمیمات جسورانه

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

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

نگاه دقیقتری بینداز f37foundry، Funplex، Langlois، Glow Motion، NOEIN OI. از رنگ های جفتی، پرکننده تک رنگ یا شیب نئون استفاده می کند.

نئون و سفید

رنگ‌های نئون و سفید هرگز با هم ترکیب نمی‌شوند، زیرا عناصر نئونی روی پس‌زمینه سفید عملاً "ناخوانا" هستند. بسیاری از رنگ های نئون از رنگ سفید برای درخشندگی خود استفاده می کنند، بنابراین صفحه نمایش چیزی شبیه نوردهی بیش از حد و نوردهی بیش از حد ایجاد می کند. به زبان ساده: افکت نئون جلوه ای از درخشش سفید است و در پس زمینه سفید همه با هم ادغام می شوند.

برندسازی نئون

برخی از شرکت ها از سایه های نئون به عنوان رنگ های اصلی برند خود استفاده می کنند. مثلا، Nvidia- سبز پررنگ (آهک) همراه با سیاه، AMD- سیاه، سفید و قرمز اشباع روشن، دیویلارد- زرد عمیق + سیاه، MTN DEW x NBA- سبز نئون در ترکیب با سایه های محو شده. در این مورد، ایجاد یک طراحی وب بسیار آسان تر است، زیرا نئون باید وجود داشته باشد، اما در مقادیر کم.

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

فراتر از اثرات

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

در همین حال، هنگام استفاده از افکت‌ها باید به ظرافت مهارت ادای احترام کرد، اما به اندازه‌ای و آنقدر نامحسوس که تقریباً نامرئی هستند.

پروژه craftedbygcهنگامی که نشانگر ماوس به آن ضربه می زند، یک انیمیشن از حرف G ایجاد کرد. دکمه ها، قاب ها و ... نیز در این سایه نئون برجسته شده اند. اما همه اینها تقریباً نامرئی است و بنابراین زیبا به نظر می رسد.

ایجاد درخشش نئون

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

گزینه دیگر انیمیشن است که با حرکت مکان نما، درخشندگی جزئی از یک عنصر خاص ایجاد می کند. این به کاربران این امکان را می دهد که توجه خود را روی شیء حفظ کنند.

رنگ‌های نئون راهی برای زنده‌کردن یک سایت به‌عنوان یک کل و حتی «بالا بردن» عناصر، در نتیجه ایجاد اثری از عمق و لایه‌بندی هستند. با این گزینه، نئون نباید رنگ های اصلی را در پالت طراحی سرکوب کند. ماهیت نئون اشباع نیست، بلکه درخشش است. می تواند صورتی کم رنگ یا زرد روشن باشد.

چندین هنوز نمونه های جالباستفاده از نئون در طراحی وب: اپلیکیشن‌های We Craft، Zaha Hadid، DERIVE، Sidewalk Labs، Creativecats، سازگار، DDD2017، bigomaha، ReNa. اتفاقات زیادی افتاد، اما روی هر کدام از آنها همه چیز متفاوت و بسیار زیبا است.

ما استفاده می کنیمفتوشاپ

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

ایده های زیادی وجود دارد، اما بیایید نگاهی بیندازیم.

ما یک نمونه طراحی گرفتیم (بسیاری از قبل با آن آشنا هستند) و در اینجا لوگو و قاب دکمه ها جلوه نئونی دارند. قاب ها بر اساس قیاس با آنچه نشان خواهیم داد ساخته می شوند. حالا بیایید چیز جالبی به پس زمینه هدر اضافه کنیم... لوگوی ما از دو سایه روشن استفاده می کند: #49A3CC و #53C3BF. از آنها استفاده خواهیم کرد.

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

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

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

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

اکنون تنها چیزی که برای افزودن به این شاهکار باقی مانده است، درخشش Glow است.

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

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

سپس استفاده می کنیم سایه داخلی با تن رنگو رنگ دوم از آرم #49A3CC. همچنین می‌توانید حالت Color را به عنوان Overlay انتخاب کنید.

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

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

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

نتیجه گیری

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

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

نئون در دوران مدرن و بسیار بسیار زیاد حتی توسط برندهای معروف استفاده می شود. شما فقط باید آن را ببینید و بفهمید: کجا و چگونه.

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

روش 1

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

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

روش 2

برای ایجاد عکس در نور نئون به گزینه دوم نیاز داریم چراغ رومیزی(ترجیحا با ساقه بلند) و یک تی شرت/پارچه قدیمی به رنگی که می خواهید عکس خود را با آن نور بدهید.

نحوه عکس گرفتن در نور نئون:

  1. پارچه را روی لامپ ببندید.
  2. لامپ را در کنار خود قرار دهید تا در قاب دیده نشود.
  3. لامپ را روشن کنید.
  4. از نورپردازی نئون لذت ببرید.
  5. می توانید دوربین خود را روی یک تایمر تنظیم کنید یا از شخصی بخواهید که در تاریکی مطلق از شما عکس بگیرد.

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

روش 3

عکس‌ها در نور نئون را می‌توان با استفاده از مواد موجود تهیه کرد. آنچه شما نیاز خواهید داشت:

  • لامپ (ترجیحا مطابق عکس)
  • نوار لوازم التحریر پهن
  • خودکار یا نشانگر دائمی.

نحوه ساخت پس زمینه عکس نئون:

  1. تمام طول لامپ را با چسب بپوشانید.
  2. روی لایه را با قلم نمدی در 1-2 لایه رنگ کنید.
  3. دوباره لامپ را با چسب بپوشانید.
  4. و دوباره با یک خودکار رنگی فضا را رنگ آمیزی کنید.
  5. نورپردازی نئون آماده است! لامپ را روشن کنید و عکس بگیرید!

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

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