در این آموزش دو نرم افزار مشهور در دنیای طراحی سایت و دو مورد از معروف ترین سایت ها برای دانلود تصویر و آیکون را معرفی می کنیم.
نرم افزارهای Photoshop وIllustrator از کاربردی ترین نرم افزارهای طراحی هستند . با امکانات حرفه ای که دارند برای ویرایش تصاویر مورد استفاده قرار می گیرند. توصیه می شود از سایت های مجاز دانلود،این دو نرم افزار را دانلودکنید. روی سیستم خود نصب کنید.
وبسایت freepik.com با داشتن تصاویر و وکتورهای لایه باز گرافیکی و جذابی که دارد در طراحی سایت به شما کمک می کند. ذکر این نکته لازم است که سایت freepik محدود میباشد. برای استفاده از آن باید از برنامه های رفع فیلتر استفاده کنید.
با توجه به اینکه همیشه استفاده از تصویر و آیکون برای انسان از جذابیت بالایی برخوردار است، در طراحی سایت نیز به کارگیری آیکون بسیار معمول و مهم است. وبسایت flaticon.com یکی از مشهورترین سایت ها برای دانلود و استفاده از آیکون های زیبا و کاربردی است که می توانید آیکون های مورد نیازتان را از آن دانلود کنید. ذکر این نکته لازم است که سایت flaticon محدود بوده و برای استفاده از آن باید از برنامه های رفع فیلتر استفاده کنید.
روش دانلود و ویرایش تصویر
در مرورگر خود کلمه freepik را جستجو کرده و بر روی لینک freepik.com کلیک کنید. همان طور که گفتیم این سایت محدود بوده و برای استفاده میبایست از نرم افزارهای رفع فیلتر استفاده کنید. این سایت دارای تصاویر بسیار زیادی است . استفاده از بیشتر آن ها رایگان است . فقط تصاویری که دارای آیکون تاج هستند، غیر رایگان می باشند.
برای دانلود تصویر، آن را انتخاب کرده و سپس دکمه” Free Download “را کلیک کنید.
پس از دانلود تصویر، یک فایل فشرده با فرمت .zip در اختیار شما قرار میگیرد. روی آن کلیک کنید. این فایل خود حاوی چند فایل است. در آن فایل های متنی و با فرمت .jpg کاربرد ندارند. فایل هایی با فرمت .eps و .ai مورد استفاده قرار میگیرند.
با کلیک بر روی هر کدام از این دو فایل گفته شده، تصویر در نرم افزار llustrator باز میشود. توجه داشته باشید که این نرم افزار بر روی سیستم نصب باشد. پس از باز شدن تصویر در نرم افزار، بهتر است آن را کمی بزرگ کرده تا راحتتر بتوانید جزییات آن را ویرایش کنید.
نرم افزار Illustrator دارای دو انتخاب گر است . با استفاده از آن ها می توانید اجزاء تصویر را انتخاب کنید.
انتخاب گر
- انتخاب گر اول: (Selection Tool): اجزاء و عناصر تصویر را به صورت کلی و گروهی انتخاب میکند.
- انتخاب گر دوم: (Direct Selection Tool) هر کدام از عناصر تصویر که بر روی آن کلیک شود انتخاب خواهد شد.
به طور مثال فرض کنید، میخواهید از پس زمینه تصویری که از سایت freepik دانلود کردید، در سایت خود استفاده کنید. با استفاده از انتخابگر کلی، همه عناصر تصویر را به بیرون از محیط عکس منتقل کنید. از منو سمت راست layers، گزینه BACKGROUND را انتخاب کرده و با کلیک روی آیکون قفل، پس زمینه را از حالت قفل خارج کنید.
به طور مثال فرض کنید، می خواهید از پس زمینه تصویری که از سایت freepik دانلود کردید، در سایت خود استفاده کنید. با استفاده از انتخابگر کلی، همه عناصر تصویر را به بیرون از محیط عکس منتقل کنید. از منو سمت راست layers، گزینه BACKGROUND را انتخاب کرده و با کلیک روی آیکون قفل، پس زمینه را از حالت قفل خارج کنید.
برای ذخیره تصویر، با کلیک راست روی تصویر و انتخاب گزینه”Selection Export “، و نام گذاری، به صورت فایل با فورمت .png در محیط کامپیوتر آن را اکسپورت کنید.
همچنین برای ویرایش تصویر در نرم افزار Photoshop، از گزینه” File < New” ابعاد دلخواهی برای تصویر انتخاب کرده و یک سند جدید ایجاد کنید.
حال تصویر پس زمینه را با درگ و دراپ (Drag&Drop)از نرمافزار Illustartor به نرم افزار Photoshop منتقل کنید.
با همین روش لایه های دیگر تصاویر را نیز به نرم افزار Photoshp منتقل کنید. تنظیماتی مثل تغییر متن، تغییر رنگ و… را بر روی تصویر اعمال کنید. توجه کنید برای حذف پس زمینه سفید تصاویر، از منو سمت راست، گزینه Background را حذف کنید تا پس زمینه عکس حالت شفاف داشته باشد.
تصویر را با فورمت .png ذخیره کنید. در طراحی سایت مورد استفاده قرار دهید.
روش دانلود آیکون
برای دانلود آیکون از سایت flaticon.com، موضوع موردنظر را جستجو کنید. از بین آیکون هایی که در نتیجه جستجو نمایش داده می شوند.شما می توانید آیکون موردنظر را دانلود کنید. در جعبه جستجو با انتخاب گزینه “Packs” نتیجه جستجو برای آیکون ها به صورت پکیج و با یک استایل مشابه هم نمایش داده می شوند. در صورت انتخاب گزینه “Icons” همه آیکون ها در مورد موضوع جستجو شده را، به صورت یک جا مشاهده می کنید.
36 دیدگاه. Leave new
با سلام و عرض ادب
اگر من لپ تاپ خودم رو ریست کنم و ویندوز جدیدی رو نصب کنم آیا میتونم فرآیند ساخت سایتم رو ادامه بدم ؟
یا همه اطلاعاتم همراه سایت از بین خواهد رفت ؟
اگر راهکاری در این مورد دارید متشکر میشوم راهنماییم کنید.
با تشکر 🙏
سلام وقت شما بخیر،
باتوجه به اینکه سایت را روی هاست راه اندازی کردید این کار مشکلی برای داده های سایت ایجاد نخواهد کرد.
با تشکر.
سلام، چرا درون آموزش وقتی از سایت freepik عکسی دانلود میکنیم فایل زیپ هستش و وارد فایل زیپ می شویم و فایل ai را باز میکنیم، ولی الان که میخوام دانلود کنم فیل jpg؟؟؟؟؟؟؟؟؟
سلام وقت شما بخیر،
در این سایت فایل ها با فرمت های مختلف ارایه میشوند و برخی از آنها بصورت فایل زیپ و با فرمت هایی نظیر psd و… می‌باشند.
با تشکر.
سلام خسته نباشید
در سایت freepick فقط فرمت jpg واسه من دانلود میشه با این فرمت می توانم وارد illustrator بشم
سلام وقت شما بخیر،
برخی از فایل های این سایت تنها در فرمت های خاصی عرضه شدند.
با تشکر.
سلام وقتتون بخیر و شادی باشه انشالله
سپاسگزارم از آموزش های مفیدتون
در قسمتی که استاد برنامه ی illustrator رو آموزش میدن بعد ازینکه عکس رو وارد برنامه کردن میتوانند اجزای عکس رو جدا کنن ولی من نمیدونم چرا برای من به هیچ عنوان نمیشه و کل تصویر تکون میخوره ،ممنون میشم راهنماییم کنید .
وقت شما بخیر
شاید مشکل شما در نحوه انتخاب قسمتی از تصویر باشد. لطفا قبل از انتخاب قسمتی از عکس، مطمئن شوید که ابزاری که در حال استفاده از آن هستید، ابزار “Selection Tool” می باشد. سپس برای انتخاب قسمتی از تصویر، می توانید از ابزار “Direct Selection Tool” استفاده کنید و یا با استفاده از دکمه “Ctrl” و کلیک روی قسمت مورد نظر، انتخاب کنید. سپس می توانید اجزای تصویر را جدا کنید. همچنین، اگر مشکل شما همچنان برطرف نشد، لطفا به نسخه برنامه و سیستم عامل خودتان و همچنین فرمت فایل عکسی که می خواهید جدا کنید، توجه کنید.
با سلام و خسته نباشید
ببخشید میخواستم بپرسم که میشه ما یک قسمت از صفحه سایت را با فتوشاپ طراحی کنیم و اون را در قسمت بکگراند ردیف اضافه کنیم و یا خیر باید تک تک اعضا ردیف را با المان درست کنیم و اینکه استفاده از فتوشاپ به این شکل نقص در طراحی سایته یا نه ایرادی نداره؟
با تشکر فراوان
وقت شما بخیر،
در فتوشاپ می توانید طراحی مدل و سبک سایت خود را انجام دهید. اما برای پیاده سازی در وردپرس ، باید دستی طراحی نمایید.
سلام ویدیو این جلسه Erorr می دهد و باز نمی شود
سلام بر شما
مشکلی ندارد ، با اینترنت دیگری تست کنید.
با تشکر.
سلام و عرض ادب
ایا طراحی این عکس ها وظیفه یک طراح وبسایته یا طراح گرافیک
سلام و عرض ادب
در کل تفاوت خاصی ندارد ، طراح سایت باید یک سایت جذاب طراحی کند که می تواند از یک طراح گرافیک هم کمک بگیرد.
با تشکر.
یعنی واقعا واقعا واقعا فوق العاده بود؛ هر توضیح اضافه ای نمیتونه حس منو در حال حاضر توصیف کنه
از شما سپاسگزارم
خواهش می کنم ،
از حضور شما ممنونیم.
سلام وقت بخیر این سایت freepik رو باید ثبت نام کنیم تا بتونیم فایل ایلوستریتور رو دانلود کنیم ؟ چون نوشته اول لاگین بشین
سلام و عرض ادب،
می توانید با جی میل خود هم در سایت لاگین کنید و از آن استفاده نمایید.
مشکلی ندارد.
با نرم افزار های تغییر آی پی اقدام نمایید.
سلام وقتتون بخیر ببخشید من لینک این صفحه رو از صفحه اصلی پیدا کردم … میشه بفرمایین این اموزش قسمت 77 کدوم آموزش هست .. چون برای آموزش جتمع وردپرس که نبود
سلام و عرض ادب،
این آموزش مربوط به ادامه آموزش وردپرس در لینک https://abzarwp.com/wordpress-tutorials/ است.
فصل دهم و آموزش 78
سلام وقت به خیر
من زمانی که از تصاویر استفاده میکنم اون تصاویر رو توی دسکتاپ با کیفیت خوبی نشون میده ولی با گوشی که باز میکنم کیفیت تصاویر فرق میکنه.
ممنون میشم راهنمایی کنید
سلام و درود آقای سخراوی
یک تیکت از ناحیه کاربری ارسال کنید تا بررسی در این رابطه داشته باشیم.
با مرورگر فایرفاکس امتحان کردم مشکلی نبود، ولی با مرورگر کروم تصویر رو با کیفیت نشون نمیده. پس ایراد از گوگل کرومه درسته؟
مرورگرتان را آپدیت کنید و مجدد بررسی داشته باشید. ممکن است مشکل با این روش حل گردد.
سلام من یه قسمتش رو select میکنم ولی نمیتونم جابجاش کنم چیکار باید بکنم ؟
سلام و احترام
متاسفانه متوجه منظورتان نمی شوم تا راهنماییتان کنم.
سلام
وقت بخیر
از آموزش مفید شما ممنونم.
سلامی دوباره وتشکری دوباره بابت زحماتتون
اینکه تونستم ایده هایی که داشتم را با آموزش های شما عملی کنم خیلی جذاب بود.
با سلام و تشکر بابت زحماتتون خواهشا ادامه جلسات رو قرار بدید
سلام بر شما ، چشم بزودی 🙂
واقعا افرادی که مثل شما علم و اطلاعاتشون رو بطور رایگان در اختیار مردم قرار دهند کم هستن، کار تو فوق العاده و تحسین برانگیز هست.
پایدار و موفق باشد استاد.
سپاس از شما بابت زحماتی که ب ای این اموزش کشیدید?
سلام و عرض خسته نباشید خدمت تمامی اعضای تیم قدرتمند ابزار وردپرس،خواستم خواهش کنم چند قسمت آخرم بزارید لطفا تا تکمیل شه این دوره و سوالی که داشتم اینه که :
1- آیا در ادامه دوره آموزش گرفتن نماد اعتماد الکترونیکی رو آموزش میدین؟
2- خواستم بپرسم این حقیقت داره که طراحی سایت با صفحه ساز المنتور باعث میشه سریع تر سایت باز بشه و از ویژوال کامپوزر بهتره؟
سلام بر شما ، ما انشالله سعی داریم در ادامه دوره در رابطه با مواردی این چنینی نیز آموزش داشته باشیم.
المنتور و ویژوال هر دو از بهترین های وردپرس هستند. از نظر سرعت قرار نیست تفاوت خیلی محسوسی باشد. بیشتر به نوع طراحی شما و … بستگی دارد.
در بحث سرعت موارد زیادی دخیل هستند.
سلام اقای جبین پور وقتتون بخیر..
خواستم اول از همه بابت دوره خیلی خوب و موثرتون تشکر کنم انشالله همیشه سرحال و سلامت باشید.. لطفا اگر امکانش هست چند جلسه هم اختصاص بدین به هاست دانلود و درگاه پرداخت و نماد اعتماد الکترونیکی..
با تشکر
سلام ، ممنون از اینکه نظرتون را مطرح نمودید. انشالله در ادامه دوره به چنین مواردی پرداخته می شود.