اکثر طراحانی که روی وب سایت ها یا اپلیکیشن های موبایل کار می کنند، عادت به استفاده از آن دارند برنامه Adobeفتوشاپ. با این حال، با توجه به پارامترهای خاصی، Adobe Fireworks مزایای زیادی نسبت به فتوشاپ سنتی دارد.
بیایید مزایای اصلی و برخی از ویژگی های خاص Fireworks را برجسته کنیم. در پایان مقاله ویدیویی وجود دارد که برخی از جنبه های عملکرد برنامه را نشان می دهد.
1. کار با اشیاء
1.1 جداسازی
هنگامی که ماوس را روی یک شی می‌چرخانید، یک مستطیل قرمز در اطراف آن ظاهر می‌شود (یا رئوس مستطیل، اگر یک گروه باشد)، که نشان می‌دهد می‌توان آن را انتخاب کرد. شی انتخاب شده با رنگ آبی مشخص می شود. من احساس می کنم که انتخاب و جابجایی اشیا در Fireworks آسانتر و سریعتر از Photoshop است که فاقد چنین عملکردی است.
1.2 گروه ها: کار سریع با اشیا
گروه بندی اشیاء
کار در Fireworks عمدتاً بر اساس گروه بندی و جداسازی اشیا است. این به شما امکان می دهد طرح بندی ها را بسیار سریعتر از فتوشاپ ایجاد کنید کار سریعگروه ها امکان پذیر نیست در آنجا گروه بندی عناصر منجر به ایجاد یک پوشه می شود و برای اینکه بعداً یک پوشه را انتخاب کنید، باید به پنل لایه ها دسترسی داشته باشید. آتش بازی هیچ مشکلی با انتخاب سریعهم کل گروه و هم اجزای آن بدون استفاده از پنل لایه ها.
اصل کار در برنامه را می توان اینگونه توصیف کرد: "آنچه در فضای کاری می بینم، با آن کار می کنم" (بر اساس قیاس با مفهوم WYSIWYG) - این به شما امکان می دهد حواس خود را پرت نکنید و سریع تر کار کنید. نامگذاری پر زحمت هر لایه و هر پوشه (به عنوان مثال، "هدر"، "پانویس"، و غیره) کاملا غیر ضروری است - ساده تر است که تمام حالت های رابط را به تصویر بکشید و آنها را درست در طرح بندی توضیح دهید، واضح تر به نظر می رسد.
کلید های میانبر صفحه کلید:گروه‌بندی - ⌘+G، لغو گروه‌بندی - ⇧+⌘+G.
منو:گروه‌بندی/گروه‌بندی - اصلاح → گروه/گروه‌بندی.
1.3 سهولت استفاده از لایه ها
این نکته مستقیماً با مورد قبلی مرتبط است: عدم وجود پوشه ها در فایل های کاری به شما امکان می دهد بدون محدود کردن چیزی و بدون ایجاد پیچیدگی، لایه ها را از طریق سلسله مراتب سند جابجا کنید (با این وجود، عملکرد پوشه ارائه شده است). دستکاری با اشیا معمولاً به حرکت ابتدایی به بالا یا پایین در سلسله مراتب لایه محدود می شود. باز هم، پانل لایه ها کمترین توجه را به خود جلب می کند. Fireworks از این نظر شبیه به Illustrator است.
کلید های میانبر صفحه کلید:حرکت به بالا/پایین - ⌘+/↓، بالا/پایین همه لایه ها - ⇧+⌘+/↓.
منو:حرکت به بالا/پایین و غیره - اصلاح ← ترتیب ← آوردن به جلو/برآوردن به عقب و غیره.
1.4 تراز کردن عناصر
رابط تراز در پانل قرار دارد تراز کردن. علاوه بر تراز عناصر نسبت به یکدیگر که در فتوشاپ موجود است، تراز عناصر نسبت به کل بوم ارائه شده است. هنگام کار با طرح‌بندی‌هایی با طرح‌بندی مرکزی بسیار مفید است.
ابزار انتخاب "پشت" یک شی نامیده می شود پشت ابزار را انتخاب کنید، در منوی کشویی ابزار پنهان است ابزار اشاره گر. این به شما امکان می دهد تا اشیاء پنهان شده در زیر یک شی را که روی آنها همپوشانی دارند انتخاب کنید، بدون اینکه مورد دوم را به طرفین ببرید یا دید آن را خاموش کنید. علاوه بر این، شما می توانید هر یک از بسیاری از اشیاء انباشته شده "در یک توده" را انتخاب کنید. برای انجام این کار، باید چندین بار روی شی واقع در بالا کلیک کنید و مورد مناسب را از لیست - از بالا به پایین انتخاب کنید.
کلید های میانبر صفحه کلید:ابزار Select Behind Tool - V یا 0 را انتخاب کنید (در صورت لزوم، دو یا چند بار فشار دهید).
1.6 راهنمای "هوشمند" ( )
همانطور که یک شی را جابجا می کنید، راهنماهای نقطه‌دار ظاهر می‌شوند که نشان می‌دهند کجای عنصر با سایر اشیاء روی بوم همسو می‌شود. می توانید "چسبیدن" جسم به راهنماها را روشن / خاموش کنید.
کلید های میانبر صفحه کلید:نمایش Smart Guides - ⌘+\، ضربه زدن به Smart Guides - ⇧+⌘+\.
منو:نمایش راهنماهای هوشمند: مشاهده ← راهنماهای هوشمند ← نمایش راهنمای هوشمند، ضربه زدن به راهنماهای هوشمند: مشاهده ← راهنماهای هوشمند ← اسنپ به راهنماهای هوشمند.
1.7 توزیع
پانل تراز کردن(به بند 1.4 مراجعه کنید) حاوی بلوک است فضا، که به شما امکان می دهد اشیاء را در فاصله مساوی در هر دو جهت افقی و عمودی توزیع کنید.
2. سبک ها
2.1 سبک های کپی
استایل یک شی می تواند چندین مؤلفه (یا ویژگی ها، ویژگی های)، مانند رنگ پر کردن، خط خطی، تایپ، اندازه فونت، و غیره. کپی کردن یک سبک از یک شی به شی دیگر بسیار سریع انجام می شود: شی منبع را انتخاب کنید، ⌘ + C را فشار دهید. سپس شی مورد نظر را انتخاب کرده و ⇧+⌥+⌘+V را فشار دهید.
کلید های میانبر صفحه کلید:سبک کپی - ⌘+C، جای‌گذاری سبک - ⇧+⌥+⌘+V.
منو:سبک کپی - ویرایش → کپی، چسباندن سبک - ویرایش → چسباندن ویژگی ها.
2.2 الگوها
در Fireworks می‌توانید یک الگوی پر شده را به یک شی اختصاص دهید که می‌تواند هر تصویری باشد. در عین حال، اگر نقاط گره‌ای طرح کلی شی را دستکاری کنید، می‌توان به راحتی بدون ایجاد اختلال در الگو، شی را تغییر شکل داد.
2.3 خطوط
خطوط ایجاد شده است ابزار برداری ابزار خط(کلید N)، می توانید سفارشی کنید (پیکربندی). گاهی اوقات لازم است یک لینک زیر خط کشیده بکشید. برای انجام این کار، در پانل خواصباید دکمه را فشار دهید Stroke را ویرایش کنید، در نمودار خط تیرهتغییر مقدار به تک داش. طول ضربه ها و فاصله های بین آنها را می توان در همان مکان تنظیم کرد.
2.4 گرادیان
کار با گرادیان در Fireworks ساده تر و راحت تر از فتوشاپ است. دو نقطه لنگر وجود دارد: یک دور شروع شیب را نشان می دهد، یک مربع - پایان آن. دومی نیز طول گرادیان را تعیین می کند. بدون پاپ آپ های متعدد مانند فتوشاپ (یکی از ویژگی های وحشتناک برنامه).
2.5 گوشه های گرد
ایجاد یک مستطیل با ابزار ابزار مستطیل(کلید Uرا در پنل انتخاب کنید خواصدر زمینه گرد بودنمقدار مورد نیاز و همچنین واحد اندازه گیری گردی گوشه ها. مستطیل حاصل را می توان با دستکاری رئوس آن تبدیل کرد، در حالی که گوشه های گردذخیره خواهد شد.
3. نمادها
نمادها اشیایی هستند که می توان آنها را بارها کپی کرد و برخی از ویژگی ها را حفظ کرد و برخی دیگر را تغییر داد. به عنوان مثال، می توانید یک نماد دکمه با قابلیت کشش آن در عرض و امکان تغییر متن روی آن ایجاد کنید. با تغییر رنگ یک دکمه، آن را در تمام کپی های دیگر نماد دکمه تغییر می دهید.
کاراکترهای پیچیده نامیده می شوند نمادهای جزء. با استفاده از پنل می توانید پارامترهای زیادی را در آنها پیکربندی کنید ویژگی های نماد. به عنوان مثال، در مورد نماد دکمه، این رنگ پر، فونت، رنگ متن و غیره است.
ویژگی خاص یک نماد، توانایی مقیاس پذیری با حفظ تمام چهره های آن است ( پوسته پوسته شدن 9 برش). ایجاد و پیکربندی آن در مرحله ایجاد یک نماد مطلوب است.
4. ماسک
کار با ماسک در Fireworks سریع و ساده است. ساده ترین راه: یک جسم برداری را در بالای لایه قرار می دهیم که یک ماسک خواهد بود. هر دو شی را انتخاب کنید، کلیک کنید کلیک راستماوس را انتخاب کنید گروه به عنوان ماسک.
5. به پیکسل ها ضربه بزنید
Fireworks بر روی ایجاد گرافیک روی صفحه متمرکز شده است. اشیاء برداری با اتصال اولیه به پیکسل ها ایجاد می شوند. اگر در نتیجه دستکاری با شی یا وارد کردن گرافیک از خارج، اتصال شکسته شود، همیشه می توان با فشار دادن میانبر صفحه کلید ⌘+K آن را بازیابی کرد.
متأسفانه، برنامه دارای یک اشکال است: گاهی اوقات وقتی فایل ها را دوباره باز می کنید، ممکن است متوجه شوید که در اشیاء برداری که به منحنی (مسیرها) تبدیل نشده اند، اتصال به پیکسل ها اشتباه می شود و لبه های اشیا مبهم می شوند. بنابراین توصیه می شود تا حد امکان اشیاء برداری مانند مستطیل را به منحنی تبدیل کنید.
کلید های میانبر صفحه کلید:تراز کردن با شبکه پیکسل - ⌘+K.
منو:تراز کردن با شبکه پیکسل - اصلاح → Snap To Pixel.
6. فایل های منبع
فایل های کاری آتش بازی با اجازه ذخیره می شوند png. مزایای آنها این است که این فایل ها:
- وزن بسیار سبک تر از فایل های psd با محتوای مشابه است.
- را می توان در هر رایانه ای بدون ذخیره مجدد در قالب دیگری مشاهده کرد (بسیاری از مردم نمی توانند فایل های psd را در رایانه خود باز کنند). این امر باعث افزایش سرعت انتقال و نمایش فایل ها به افراد دیگر می شود.
7. وارد کردن از Adobe Photoshop/Adobe Illustrator
Fireworks فایل های psd را باز می کند، اما با برخی محدودیت ها و اشکالات. متأسفانه، این مکانیسم به طور کامل توسط Adobe توسعه نیافته است.
گرافیک های برداری را می توان از Illustrator وارد کرد. به طور خاص، استفاده از استاندارد Copy→Paste راحت است. در عین حال، دقت نمایش گرافیک حفظ می شود (برای دستیابی به بیشترین دقت، در Illustrator توصیه می کنم عملیاتی را روی اشیا انجام دهید. بسط دادن، آنها را به ساده ترین خطوط می رساند).
8. گزینه ها را به CSS صادر کنید
یکی از ویژگی های مفید سازنده وب سایت، صادرات ویژگی های شی به CSS است. اینها ممکن است شامل رنگ (این می تواند یک گرادیان باشد)، سایه ها، فونت، و غیره باشد - هر چیزی که بتوان توصیف کرد ویژگی های CSS. برای این عملیات از پنل استفاده می شود. ویژگی های CSS.
کلید های میانبر صفحه کلید:با پانل CSS Properties - Fn + ⌘ + F7 تماس بگیرید.
منو:پانل CSS Properties - Window → CSS Properties را فراخوانی کنید.
9. نمونه های اولیه
Fireworks همچنین یک ابزار کامل برای نمونه سازی وب سایت و برنامه های موبایل. در حین کار در برنامه، می توانید به طور همزمان طرح های طراحی و صادرات را به نمونه اولیه اصلاح کنید. در نتیجه، می توانید مجموعه ای از فایل های html را دریافت کنید، روی پیوندهایی که می توانید روی آنها "کلیک کنید" و تصور کنید که سایت آینده چگونه کار می کند.
ویدیو
به عنوان افزودنی به مقاله، من یک ویدیو ضبط کردم تا برخی از اصول برنامه که در بالا توضیح داده شد را به وضوح نشان دهم.
نتیجه
امروزه Fireworks بخشی از Adobe است. ابر خلاق، اگرچه متأسفانه Adobe آن را رها کرده است پیشرفتهای بعدیاین محصول ارزشمند (که طرفداران Fireworks در سراسر جهان به طرز غیرقابل توصیفی از آن ناراحت بودند)، نوید ایجاد آنالوگ های کافی را می دهد، که با این حال، ما هنوز نمی بینیم.
در کشور ما، این ویرایشگر گرافیکی محبوبیتی کسب نکرده است. اتفاقاً هزینه بسته Adobe Creative Suite به طور متوسط برابر با هزینه ترافیک اینترنت برای دانلود آن یا هزینه رسانه ای است که روی آن ضبط شده است. به همین دلیل است که همه استفاده می کنند فتوشاپو Adobe Illustratorبرای ایجاد طراحی وب خب، اکنون، شخصاً زمان آن رسیده است که به مجوز نرم افزار فکر کنم.من خودم طراح وب نیستم، من یک برنامه نویس هستم. کارهای اصلی که با کمک آنها حل می کنم ویرایشگر گرافیکیحداقل تغییر شطرنجی است و گرافیک برداری، برش طرح تمام شده، بهینه سازی تصویر، نمونه سازی اولیه و غیره. فتوشاپ و ایلاستریتور این مشکلات را بدون مشکل حل می کنند، اما Fireworks نیز قادر به حل آنها است. و حالا بیایید هزینه Photoshop + Illustrator (700 دلار + 600 دلار) را به یاد بیاوریم و آن را با هزینه Fireworks (300 دلار) مقایسه کنیم.
اغلب اتفاق می افتد که Fireworks نمی تواند با نمایش بومی مقابله کند فایل های فتوشاپو تصویرگر در نمایش برخی از جلوه ها اشکالاتی وجود دارد. در چنین مواردی، یک اسکرین شات مرجع معمولا کمک می کند، که به شما امکان می دهد بفهمید مشکل کجاست و در صورت امکان، آن را برطرف کنید. همچنین داشته باشد ویرایشگران جایگزین(Gimp، Pixelmator) که باز می شوند فایل اصلی، اما با اشکالات خودش که در Fireworks نیست.
بنابراین، بعید است که Fireworks مورد توجه طراحانی باشد که قبلاً در فتوشاپ کار می کنند، کاربران اصلی آن برنامه نویسان، طراحان صفحه آرایی، طراحان و بخش کوچکی از طراحان (حداقل در روسیه) هستند.
مجموعه ای از فیلم ها در مورد آتش بازی
پس از جستجو در Runet برای حضور ویدیویی در مورد آتش بازی به زبان روسی، به طور تصادفی به خلاء خاصی برخوردم. تمام لینک های موجود به یوتیوب منتهی می شوند. پس به او روی آوردم و نتایج جستجو تحت حبرکات است. چه کسانی به این ویدیوها علاقه مند خواهند شد؟ اول از همه، برنامه نویسان، تا حدی طراحان چیدمان، که می خواهند بفهمند طراحی وب چگونه ایجاد می شود و چرا همیشه به فتوشاپ نیاز ندارند.فرآیند ایجاد سایت در Fireworks
البته ایجاد یک وب سایت تمام عیار در مدت زمان کوتاهی از ویدیو کارساز نخواهد بود. بنابراین زمانی برای ترسیم دقیق طرح وجود ندارد و مشخصاً قابلیت های Fireworks کمتر از فتوشاپ است. طرح به دست آمده بر اساس جداول است. این بیشتر یک نمونه اولیه است تا یک سایت واقعی، اما برای کارهای ساده ممکن است مناسب باشد. هدف مقاله و این ویدیوها نشان دادن امکانات Fireworks است که در بسیاری از موارد می تواند جایگزین Photoshop و Illustrator شود. به عنوان یک برنامه نویس، تماشای کار یک طراح و یادگیری چند کار ساده برای من جالب بود.ویدئو از مشاوره وب ام ال
ویدیوی بسیار زیبا در 2 قسمت ابتدا یک طرح طراحی سایت در Fireworks ایجاد می شود، سپس پروژه به Dreamweaver صادر می شود، کمی تصحیح می شود و سایت آماده می شود. با توجه به این ویدئو، ایجاد سایت 20 دقیقه طول کشید، اما نویسنده از قبل آماده سازی کرده بود. اما با این حال، در مدت زمان کوتاهی، طراحی نسبتاً زیبا و چیدمان کاری روی میزها ظاهر شد.غلتک توسط NeaceDesign
اینجا همه چیز صادقانه است. نویسنده ویدیو در 10 دقیقه یک وب سایت نمونه کار عکاسی را ایجاد کرد. ساده و زیبا معلوم شد.غلتک از crearegroup
این ویدیوها روند ایجاد یک سایت (نمونه اولیه) را از دریافت یک طرح به نشان می دهد فرمت فتوشاپ، به سایت تمام شده، کمی در Dreamweaver تغییر یافته است. فقط 15 دقیقه همراه با توضیحاتویدئوها از flashwebcenter
من لینک این ویدیوها را می گذارم. کیفیت ضبط خیلی خوب نیست، تفسیر همیشه شنیدنی نیست. و تصمیمات طراحی شخصاً برای من کمی عجیب به نظر می رسد. اما کل فرآیند از ابتدا تا انتها نشان داده می شود، فقط 30 دقیقه در هر سایت. در کشور ما، این ویرایشگر گرافیکی محبوبیتی کسب نکرده است. اتفاقاً هزینه بسته Adobe Creative Suite به طور متوسط برابر با هزینه ترافیک اینترنت برای دانلود آن یا هزینه رسانه ای است که روی آن ضبط شده است. تا حدی به همین دلیل است که همه از Adobe Photoshop و Adobe Illustrator برای ایجاد طرح های وب استفاده می کنند. خب، اکنون، شخصاً زمان آن رسیده است که به مجوز نرم افزار فکر کنم.من خودم طراح وب نیستم، من یک برنامه نویس هستم. کارهای اصلی که من با کمک یک ویرایشگر گرافیکی حل می کنم عبارتند از اصلاح حداقلی گرافیک های شطرنجی و برداری، برش طرح تمام شده، بهینه سازی تصویر، نمونه سازی اولیه و غیره. فتوشاپ و ایلاستریتور این مشکلات را بدون مشکل حل می کنند، اما Fireworks نیز قادر به حل آنها است. و حالا بیایید هزینه Photoshop + Illustrator (700 دلار + 600 دلار) را به یاد بیاوریم و آن را با هزینه Fireworks (300 دلار) مقایسه کنیم.
اغلب اتفاق می افتد که Fireworks نمی تواند با نمایش فایل های Photoshop و Illustrator بومی مقابله کند. در نمایش برخی از جلوه ها اشکالاتی وجود دارد. در چنین مواردی، یک اسکرین شات مرجع معمولا کمک می کند، که به شما امکان می دهد بفهمید مشکل کجاست و در صورت امکان، آن را برطرف کنید. همچنین ویرایشگرهای جایگزین (Gimp، Pixelmator) وجود دارند که فایل منبع را باز می کنند، اما با اشکالات خاص خود که در Fireworks نیستند.
بنابراین، بعید است که Fireworks مورد توجه طراحانی باشد که قبلاً در فتوشاپ کار می کنند، کاربران اصلی آن برنامه نویسان، طراحان صفحه آرایی، طراحان و بخش کوچکی از طراحان (حداقل در روسیه) هستند.
