نحوه ایجاد پیمایش اختلاف منظر با استفاده از Adobe Muse

یکی از "داغ ترین" تکنیک ها در وب امروز پیمایش اختلاف منظر است. همه ما به آن سایتهایی هستیم که چرخش پیمایش را روی موشواره خود چرخانده اید و محتوای چرخش صفحه به سمت بالا و پایین و یا در سراسر صفحه چرخانده می شود.

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

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

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

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

بیا شروع کنیم.

01 از 07

یک صفحه وب ایجاد کنید

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

02 از 07

صفحه را فرمت کنید

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

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

03 از 07

متن را به صفحه اضافه کنید

گام بعدی اضافه کردن برخی از متن به صفحه است. ابزار Text را انتخاب کردیم و یک جعبه متن را بیرون کشیدیم. ما کلمه "Welcome" را وارد کرده ایم و در Properties متن Arial را 120 پیکسل سفید تنظیم می کنیم. مرکز هماهنگ شده

سپس به ابزار Selection بروید، بر روی جعبه متن کلیک کنید و موقعیت Y خود را به 168 پیکسل از بالا تنظیم کنید. با کادر متن هنوز انتخاب شده است، ما پانل Align را باز کردیم و کادر متن را به مرکز هموار کردیم.

سرانجام، با انتخاب کادر متن، کلید های Option / Alt و Shift را برگزار کردیم و چهار کپی از جعبه متن را ایجاد کردیم. ما متن و موقعیت Y هر نسخه را تغییر دادیم:

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

04 از 07

اضافه کردن متغیرهایی تصویر

گام بعدی برای قرار دادن تصاویر بین بلوک های متن است.

اولین گام این است که ابزار مستطیل را انتخاب کنید و جعبه ای را که از یک طرف صفحه به سمت دیگر می چرخد ، بکشید . با انتخاب مستطیل، ارتفاع آن را به 250 پیکسل و موقعیت Y آن به 425 پیکسل تنظیم می کنیم . طرح این است که آنها همیشه کشش و یا قراردادن به عرض صفحه برای پذیرش مرورگر مرورگر کاربر است. برای انجام این کار، ما روی دکمه عرض 100٪ در Properties کلیک کردیم. این چیزی است که ارزش X را خاکستری کرده و اطمینان حاصل کنید که تصویر همیشه 100٪ از عرض مرورگر در یک مرورگر است.

05 از 07

تصاویر را به متغیرهایی تصویر اضافه کنید

با انتخاب Rectangle ما پیوند Fill را کلیک کردیم - نه Chip Color - و جوهر I magge را کلیک کردیم تا یک تصویر را در مستطیل اضافه کنیم. در منطقه Fitting ، Scale To Fit را انتخاب کردیم و در قسمت Location موقعیت مرکزی را کلیک کردیم تا اطمینان حاصل شود که تصویر از مرکز تصویر کوچک شده است.

بعد، از تکنیک Option / Alt-Shift-drag استفاده کردیم تا یک کپی از تصویر بین دو بلوک متن ایجاد کنیم، پنل Fill را باز کردیم و تصویر را برای دیگران مبادله کردیم. این کار را برای دو تصویر دیگر نیز انجام دادیم.

با تصاویر در محل، زمان برای اضافه کردن حرکت است.

06 از 07

پیمایش اختلاف منظر را اضافه کنید

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

با باز کردن پنل Fill، روی برگه Scroll کلیک کنید و وقتی که باز می شود، روی جعبه حرکت کلیک کنید .

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

فلش های افقی و عمودی جهت حرکت را تعیین می کند. اگر مقادیر 0 باشند، تصاویری بدون در نظر گرفتن فلش کلیک نمیشوند.

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

این را برای تصاویر دیگر در صفحه تکرار کنید.

07 از 07

تست مرورگر

در این مرحله ما تمام شدیم. اولین کاری که ما انجام دادیم، به دلایل روشن بود، انتخاب File> Save Site بود . برای تست مرورگر، ما به سادگی File> Preview Page را در مرورگر انتخاب کردیم . این مرورگر پیش فرض کامپیوتر ما را باز کرد و هنگامی که صفحه باز شد ما شروع به پیمایش کردیم.