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

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

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

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

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

اصولاً هنگام تهیه قسمت محتوای طرح از دو نوع فونت استفاده می شود:

• قلمهای سریف
• قلمهای سریفی (فونتهای sif serif)

قلمهای سریف- (serif انگلیسی - serif) فونت هایی که سبک شروع می شود و با سکته مغزی به پایان می رسد. به عنوان مثال Times New Roman.

فونت های سری بدون sans(فونت های خرد شده) - (انگلیسی sans-serif -sans serif) فونت هایی با خط مستقیم مستقیم sans serif. به عنوان مثال Arial.

در زیر می توانید تصویری از فونت های سری و sans serif را مشاهده کنید.

فونت برای طراحی وب:

• Arial
• سیاه سیاه و سفید
• باریک باریک
• کتاب آنتیک
• گوتیک قرن
• بدون طنز MS
• پیک جدید
• محیط گوتیک فرانکلین
• جورجیا
• ضربه
• کنسول Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• لاتوتیپ پلاتینو
• سیلفائن
• تاهوما
• تایمز نیو رومن
• Trebuchet MS
• وردانا
• صفحات وب (نمادها و علائم مختلف)
• عروسی (نمادها و علائم مختلف)

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

فونت های استاندارد در ویندوز فاقد تکراری هستند:

• سیاه سیاه و سفید
• بدون طنز MS
• محیط گوتیک فرانکلین
• ضربه
• کنسول Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• سیلفائن
• تاهوما

از آنجا که قبلاً فونت هایی را ذکر کردم که فاقد تکراری هستند ، بنابراین برای یک چیز می خواهم به این واقعیت توجه داشته باشم که قلم هایی وجود دارند که در اصل قلم های جسورانه هستند. به همین دلایل ، در استفاده از سبک هایی که نشان دهنده جسورانه باشد ، هیچ نکته ای وجود ندارد ، زیرا نتیجه آن چیزی نیست که ما می خواهیم.

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

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

1. مونتسرات

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

2. چربی ابری

Abril Fatface بخشی از یک خانواده فونت گسترده تر است که دارای 18 سبک است و برای اهداف مختلف طراحی شده است. این قلم از حضور پررنگ و ظریف برخوردار است و آن را به گزینه ای مناسب برای عناوین جالب توجه تبدیل می کند. بیشتر اوقات با Lato ، Open Sans و Droid Sans ترکیب می شود.

3. نمایش پخش

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

4. GT والسیم

GT Walsheim امروزه در بسیاری از وبلاگها مورد استفاده قرار گرفته است. یک سریال هندسی بدون sans و بخشی از خانواده Grilli Type است. شما باید هزینه مجموعه کامل قلم را بپردازید ، اما Grilli Type یک آزمایش رایگان از GT Walsheim را ارائه می دهد.

5. Merriweather

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

6. ژوزفین sans

Josefin Sans مطابق قواعد طراحی پرنعمت سوئدی ایجاد شده و از زیبایی شناسی هندسی ظریف برخوردار است.

7. گرانیت یکی

Gravitas One مبتنی بر "صورت چربی انگلستان" است ، یک قلم تبلیغاتی جسورانه که در طول انقلاب صنعتی در انگلیس پدیدار شد. این فونت در مقیاس های متوسط \u200b\u200bتا بزرگ عالی به نظر می رسد و برای عنوان ها ، عنوان ها و زبانه ها مناسب است.

8. یورا

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

9. لیگ گوتیک

در ابتدا توسط موریس فولر بنتون برای شرکت آمریکایی Type Founders در سال 1903 طراحی شده است ، League Gothic پس از به روزرسانی و اضافه کردن گلیف های جدید ، کاربردهای جدیدی پیدا کرده است.

10. فیجر

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

11. آمانانت

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

12. چند

این فونت کنتراست متوسط \u200b\u200bدر ابتدا برای زبان مادری Wayuunaiki ایجاد شده است که به گلایهای گسترده احتیاج دارد. این دستگاه دارای ظرافت های کوچک و قد x است و در اندازه های کوچک به ویژه مفید است.

13. جنتیم بیسیک

این قلم به عنوان یک قلم چند زبانه طراحی شده است که شامل حروف لاتین و یونانی و همچنین سیریلیک و پشتیبانی پیشرفته در نسخه Gentium Plus می باشد. Gentium Basic و Gentium Book Basic به صورت یک نسخه وب رایگان در دسترس هستند ، اما فقط به الفبای لاتین محدود هستند.

14. بدون سانسور

Open Sans نماینده ای از گروتسک های اومانیستی است. این فونت از خوانایی بالایی برخوردار است و برای هر دو رابط وب و تلفن همراه سازگار است. این یک نوع بدون بریدگی با یک تایپ ساده است که ظاهری خنثی و در عین حال دلپذیر برای متناسب با اهداف مختلف دارد.

15. لجر منظم

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

16. Signika

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

17. دال ژوزفین

Josefin Slab با توجه به کانن های یک قلم هندسی که از دهه 30 میلادی قرن گذشته ایجاد شده است ، با اضافه کردن ویژگی های اسکاندیناوی ، ویژگی های نوع دال را دارد و به یک ماشین تحریر شباهت دارد. جالب آنکه ارتفاع x آن نیمی از ارتفاع حرف بزرگ است.

18. انجمن

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

Tikal Sans با نام یکی از مشهورترین شهرهای مایان ، دارای صفات گلیف است که در نگارش تمدن آمریکای جنوبی مورد استفاده قرار می گرفت. خالق آن یک ارتفاع بزرگ x را انتخاب کرده تا به فونت ظاهری مدرن و تأثیر مفیدی بر خوانا بودن داشته باشد ، و طیف گسترده ای از سبک های صورت اجازه می دهد تا از آن برای اهداف مختلف استفاده شود.

20. آروو

مناسب برای چاپ و وب به طور یکسان ، این فونت صفحه هندسی به زبان های رومی ، ایتالیایی ، رومانی بولد و Bold Italic در دسترس است. کنتراست پایین آروو ، خوانایی روی صفحه را بهبود می بخشد.

21. بوان

Bevan از نوع سنتی اسلب دهه 30s الهام گرفته شد. نامه ها برای وب دیجیتالیزه شده ، تغییر شکل داده شده و بهینه شده اند. این یکی از معدود فونتهای فوق العاده جسورانه است که برای وب سایت ها مناسب است.

22. قدیمی استاندارد TT

Old Standard TT مبتنی بر فونت سری مدرن بود که در اواخر قرن نوزدهم و اوایل قرن بیستم محبوب شد و پس از آن برای مدت طولانی فراموش شد. این فونت برای دادن سبک به نوع خاصی از مطالب مانند تحقیقات علمی یا متون به زبان یونانی یا سیریلی مناسب است.

23. کرون

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

24. بدون خوانده

Droid Sans برای حداکثر خوانایی حتی در رابط های کوچک بهینه شده است - به عنوان مثال ، منوهای روی صفحه های تلفن همراه. یک نوع خنثی و غیر اریب با حروف باز ساده است.

25. ایتالیایی

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

26. وولکورن

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

27. بازیگر

این فونت از قد X به خصوص بزرگ برخوردار است که به فضای زیادی احتیاج دارد. بازیگر همچنین از سبک برخی از شخصیت ها مانند شماره های 6 و 9 سبک قدیمی دارد.

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

31. اوبونتو

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

32. روزاریو

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

33. دال روبوتو

Roboto Slab یکی از قلم های Roboto است. نسخه دال به خصوص با اشکال هندسی و منحنی های باز چشم نواز است. برای صفحه نمایش ابزارک و نسخه های چاپی متون نیز به همان اندازه کار می کند.

34. اسوالد

Typeface یک نسخه اصلاح شده از سری کلاسیک Alternate Gothic sans است. اووال به تازگی به روز شده است تا انواع مختلفی از وزن ها ، مجموعه های شخصیت های گسترده و کرنرینگ راحت تری داشته باشد.

35. بن بست

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

36. متن زرشکی

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

در این آموزش به شما نشان می دهم که چگونه با استفاده از آیکون های شخصی خود ، فونت وب سایت خود را ایجاد کنید. همه آنچه ما نیاز داریم یک برنامه گرافیکی بردار (Adobe Illustrator یا Inkspcape) و دسترسی به اینترنت است! بنابراین بیایید شروع کنیم! شما می توانید تمام تصاویر استفاده شده ، نمادها و فونت css را در انتهای مقاله بارگیری کنید.

برای این آموزش کاری ساده انجام خواهیم داد. برای اولین نماد یک ستاره معمولی ترسیم خواهیم کرد. برای نماد دوم - عقاب با W در داخل. رسم آن به اندازه کافی آسان است و می توانید هر شکل و ترکیب را ایجاد کنید. من برای این منظور از تصویرگر استفاده کردم.

پس از پایان بخش خلاق ، ایجاد شما باید با فرمت SVG ذخیره شود. روی "ذخیره As" کلیک کنید و نوع پرونده را به عنوان SVG انتخاب کنید. اکنون می توانید مستقیماً به سمت ایجاد یک قلم بروید.

برای این اهداف ، ما از سرویس محبوب و رایگان IcoMoon استفاده می کنیم.

اولین کاری که باید بکنید ایجاد یک پروژه جدید است ، بنابراین بر روی منوی گوشه بالا سمت چپ کلیک کرده و روی "New Project" کلیک کنید. در مرحله بعد ، فایلهای svg آماده ما را پس از کلیک بر روی دکمه "Import Icons" بارگذاری کنید. پس از انجام این مراحل ، باید تصویری از این نوع در مانیتور خود مشاهده کنید:

اکنون ما توانایی تغییر کد برای هر آیکون را داریم (در مورد ما e600 و e601 خواهد بود) ، نام قلم ما ، پیشوند CSS و غیره. همه این موارد در "ترجیحات" انجام می شود. همچنین ، می توان فونت را در عمل مشاهده کردیم ، روی پیوند "فعال کردن سریع استفاده" کلیک کنید - که پیوند موقت با قلم ما را دریافت می کند ، و همچنین گزینه مشاهده کد در CodePen را مشاهده می کنید.

بعد از تنظیم همه چیز ، روی دکمه "بارگیری" در انتهای صفحه کلیک کنید و بایگانی را بارگیری کنید. در این بایگانی ها فونت خود را در قالب های ttf ، eot ، svg و woff + یک صفحه نمایشی با قلم پیدا خواهید کرد.

استفاده از آیکون های موجود در سایت

اکنون تمام کاری که ما باید انجام دهیم این است که قلم CSS را با استفاده از @ font-face متصل کنیم و پارامترهای دیگری را مشخص کنیم (همه آنها در پرونده css در بایگانی که بارگیری کرده اید نوشته شده است).

@ font-face (font-family: "wdm-eagle"؛ src: url ("// yourwebsitename.com/fonts/wdm-eagle.eot")؛) ، (font-family: "wdm-eagle"؛ صحبت کن: هیچ یک؛ font-style: normal؛ font-weight: normal؛ font-variant: normal؛ تبدیل متن: هیچ کدام؛ line-height: 1؛ / * رندر بهتر قلم \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / -webkit-font-smoothing: antialiased؛ -moz-osx-font-smoothing: grayscale؛) .wdm-star: قبل (محتوای: "\\ e600"؛) .wdm-eagle: قبل (محتوای: "\\ e601"؛ )

اکنون می توانیم از قلم خود در کد HTML مانند این استفاده کنیم:

با مشخص کردن نام کلاس برای برچسب ما نماد خود را می گیریم.

.

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

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

اتصال قلمهای وب با استفاده از @ font-face:

• با استفاده از یک راهنما ، یک قلم سفارشی متصل کنید

دستورالعمل

به مرورگر می گوید که فونت را با نام مشخص شده در عناصر صفحه انتخاب شده اعمال کند.

چندین قالب برای فونتهای وب وجود دارد. رایج ترین آنها: EOT ، WOFF ، OTF یا TTF ،

قالب EOT، که مرورگرهای IE تا نسخه 8 را درک می کنند. در واقع ، این قالب قلم ایجاد شده است و فقط به خاطر این مرورگر و نسخه های آن وجود دارد. برای بدست آوردن یک قلم EOT ، برای تبدیل TTF به فرمت OET به نرم افزار خاصی احتیاج دارید.

فرمت WOFF (قالب فونت وب باز) بهترین گزینه برای استفاده در وب است: کوچکترین و سبکترین ، توسط همه مرورگرهای مدرن (از جمله IE9 و بالاتر) پشتیبانی می شود. این قالب به طور خاص برای وب ایجاد شده است. در واقع ، این یک نسخه سبک وزن از قالب TTF یا OTF است.

قالب های OTF (Open Type Font) و TTF (True Type Font) رایج ترین قلم های رایانه ای هستند که در اکثر سیستم عامل ها (ویندوز ، مکینتاش ، لینوکس) و در برنامه های کاربردی برای این سیستم ها مورد استفاده قرار می گیرند. اما علاوه بر آن ، چنین فونت هایی را می توان به راحتی در اینترنت استفاده کرد.

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

به همین دلیل ، تصاویر در این قالب بدون از دست دادن کیفیت اندازه گیری می شوند - در هنگام افزایش اندازه تصویر ، کامپیوتر فقط نیاز به محاسبه مجدد نقاط بردار دارد. ویژگی این قالب گرافیکی باعث شده است تا بتوان از آن برای ایجاد "فونت" استفاده کرد. یعنی یک قلم معمولی به فرمت SVG تبدیل می شود ، جایی که هر فونت در واقع یک تصویر SVG مقیاس پذیر است.

چرا چنین مشکلاتی لازم بود؟ نکته این است که مرورگرهای سیستم عامل Android (یک سیستم عامل بسیار رایج برای دستگاه های تلفن همراه) می توانند فونت های وب را فقط در این قالب نمایش دهند. مرورگرهای آیفون (Safari 4.1 و پایین) همچنین نمی توانند یک قلم وب را تشخیص دهند. این افراد "دست و پا چلفتی" است که آنها تصاویر را به صورت قلم می لغزند - "شما نمی دانید که چگونه غذای معمولی بخورید ، پس حداقل این را بخورید!"

مسئله حقوقی استفاده از قلم ها

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

پرداخت شده قلم ها به آن دسته تقسیم می شوند که:

• می توان استفاده در وب
• نمی تواند استفاده در وب

برای اینکه مشکلی برای مسئله گیج کننده مجوز قلم ها ایجاد نکنید ، می توانید از خدمات وب استفاده کنید قلم های Google یا TypeKit ، که شامل همه فونت ها است ، که می تواند در وب استفاده شود... فونت های موجود در این سرورها یا هستند رایگان (قلم های Google)، یا پرداخت شده (TypeKit)

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

https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• فونت های Google ( https://www.google.com/fonts)
• کتابخانه فونت باز (http://openfontlibarus.org/ru)
• Fontex.org (http://fontex.org/)
• ریخته گری قلم Exljbris (http://www.exljbris.com/)

بیشتر سرویسهای وب که فونتهایی را برای وب فراهم می کنند ، آنها را با فرمت OTF یا TTF "ارائه می دهند". بنابراین لازم است که این قلم را به چهار قالب که در بالا توضیح داده شده تبدیل کنیم تا حداکثر تعداد بازدید کنندگان سایت بتوانند محتوای این سایت را در دستگاههای خود مشاهده کنند. برای تبدیل نیاز به جستجوی نرم افزار ویژه نیست. شما می توانید ژنراتور رایگان @ font-face موجود در FontSquirrel (http://www.fontsquirrel.com/) استفاده کنید.

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

ژنراتور

مهم و باید به شرح زیر باشد: @ font-face (font-face: "PTSans"؛ src: url ("PTSansRegular.eot")؛ src: format ("embedded-opentype") ، url ("PTSansRegular.woff") ("woff") ، url ("PTSansRegular.ttf") قالب ("truetype") ، url ("PTSansRegular.svg") قالب ("svg") ؛)

• بخور - فقط برای Internet Explorer 8 و زیر فرمت کنید
• WOFF - مدرن ترین و کوچکترین فونت که بیشتر مرورگرهای مدرن درک می کنند
• TTF - فونت نسبتاً بزرگ و نسبتاً منسوخ
• SVG - بزرگترین فونت در اندازه و حجم ، بنابراین باید در آخرین خط قرار داده شود. علاوه بر این ، این قالب قلم فقط توسط مرورگرهای سیستم عامل آندروید یا Safari 4 استفاده می شود ( یعنی آیفون)

مرورگر بدنه بخشنامه را می خواند

بر اساس تجربه توسعه دهندگان وب قبلی ، تصادفی و تجربی تأیید نشده است. h1 (font-family: "League Gothic"، Arial، sans-serif؛ font-weight: normal؛)

استفاده صحیح از فونت وب متصل League Gothic. در اینجا نام قلم متصل در وهله اول مشخص می شود ، و سپس - فونت های fallback که مشخص است بر روی سیستم کاربر نصب می شوند (نام قلم تضمین شده در سیستم و خانواده فونت).

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

علاوه بر حروف ، فونت ها می توانند از نمادها یا تصاویر تشکیل شوند. منابع برای موضوع نمادها و نمادهای قلم:

انواع قلم ها

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

متن واقعاً به صورت ایتالیایی ساخته شده است. و در ایتالیک های جسورانه از طریق برچسب ها

1

قوی ایم

در نوع ایتالیایی جسورانه ساخته شده است. به نظر ما می رسد که مرورگر متن را به روشی كه ما برایش تعریف می کنیم ، می سازد.

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

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

بسیار پیچیده است و به دو روش قابل انجام است: سادهکه IE8 نمی فهمد (اما همه مرورگرهای دیگر انجام می دهند) و بغرنجکه در دسترس خواهد بود و IE8 نیز هست.

روشی آسان برای اتصال یک فونت وب

یک روش ساده اضافه کردن به بخشنامه است

و این قوانین نقش متفاوتی را ایفا می کنند ، آنها مرورگر را مجبور می کنند قلم وب را با سبک و وزن مشخص شده بارگذاری کند. برای واضح تر شدن ، مثالی از اتصال فونت وب PTSans با چهار گزینه نمایش: @ font-face (خانواده-فونت: "PTSans" ؛ src: url ("PTSansRegular.eot") ؛ src: url ("PTSansRegular.eot # iefix") قالب ("opentype" تعبیه شده) ، قالب url ("PTSansRegular.woff") ("woff") ، url ("PTSansRegular.ttf") قالب ("truetype") ، url ("PTSansRegular.svg") svg ")؛ font-weight: normal؛ font-style: normal؛ ) @ font-face (font-family: "PTSans"؛ src: url ("PTSansItalic.eot")؛ src: url ("PTSansItalic.eot # iefix") قالب ("تعبیه شده-opentype") ، آدرس اینترنتی ("PTSansItalic قالب .woff ") (" woff ") ، url (" PTSansItalic.ttf ") فرمت (" truetype ") ، url (" PTSansItalic.svg ") قالب (" svg ") ؛ وزن قلم: عادی ، سبک قلم : italic؛) @ font-face (font-family: "PTSans"؛ src: url ("PTSansBold.eot")؛ src: url ("PTSansBold.eot # iefix") فرمت ("تعبیه شده-opentype") ، آدرس اینترنتی قالب ("PTSansBold.woff") ("woff") ، url ("PTSansBold.ttf") قالب ("truetype") ، url ("PTSansBold.svg") فرمت ("svg") ؛ وزن قلم: پررنگ؛ font-style: normal؛) @ font-face (font-family: "PTSans"؛ src: url ("PTSansBoldItalic.eot")؛ src: format ("embedded-opentype") ، آدرس اینترنتی ("PTSansBoldItalic.woof") قالب ("woff") ، url ("PTSansBoldItalic.ttf") قالب ("truetype") ، url ("PTSansBoldItalic.svg") فرمت ("svg") ؛ وزن قلم: پررنگ ، سبک قلم: italic؛)

من به شما می گویم چگونه این قوانین CSS را می فهمم. دستورالعمل

... این متغیر آرایه ای است که با استفاده از قوانین زیر از مقادیر پر شده است:

• - بارگذاری قلم وزن مشخص شده؛
• آن هر بار توسط یک تماس تابع جداگانه به عناصر صفحه انتخاب شده تولید می شد: p (font-family: PTSans؛)

  و سپس با برچسب های HTML

  مشخص کنید که کدام نوع قلم برای عناصر مشخص شده اعمال شود: Dolor et< strong > lorem ipsum dolor ets lorem ipsum ipsum dolor ets lorem ipsum< em > dolor ets lorem ipsum dolor ets lorem ipsum dolor ets

  مرورگر قلم سبک مورد نظر (حروف برجسته یا ایتالیایی یا جسورانه جسورانه) را از آرایه PTSans "کشیده" کرده و آن را بر روی عناصر صفحه مشخص شده اعمال می کند.

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

  و

  جایی که برچسب ها اعمال می شوند

  ، IE8 خود قلم PTSans را ارائه می دهد. نمونه ای از اتصال فونت وب دوستانه IE8 در زیر نشان داده شده است: @ font-face (font-face: "PTSansRegular"؛ src: url ("PTSansRegular.eot")؛ src: url ("PTSansRegular.eot # iefix") قالب ("opentype" تعبیه شده) ، قالب url ("PTSansRegular.woff") ("woff") ، url ("PTSansRegular.ttf") قالب ("truetype") ، url ("PTSansRegular.svg") svg ")؛ ) @ font-face (font-family: "PTSansItalic"؛ src: url ("PTSansItalic.eot")؛ src: url ("PTSansItalic.eot # iefix") قالب ("تعبیه شده-opentype") ، آدرس ("PTSansItalic قالب .woff ") (" woff ") ، قالب url (" PTSansItalic.ttf ") (" truetype ") ، url (" PTSansItalic.svg ") قالب (" svg ") ؛) @ font-face (font-family) : "PTSansBold"؛ src: url ("PTSansBold.eot")؛ src: url ("PTSansBold.eot # iefix") قالب ("جاسازی شده-opentype") ، آدرس اینترنتی ("PTSansBold.woff") ("woff") ) ، url ("PTSansBold.ttf") قالب ("truetype") ، url ("PTSansBold.svg") قالب ("svg") ؛) @ font-face (font-family: font-family: "PTSansBoldItalic"؛ src: url ( "PTSansBoldItalic.eot")؛ src: آدرس اینترنتی ("PTSansBoldItalic.eot # iefix") قالب ("opentype تعبیه شده") ، فرم url ("PTSansBoldItalic.woof") ("woff") ، url ("PTSansBoldItalic.ttf") قالب ("truetype") ، url ("PTSansBoldItalic.svg") svg ")؛ )

  توجه داشته باشید که عدم وجود قوانین است

  و ،؟ در این حالت چیدمان های سبک چقدر نفخ هستند! چه می شود اگر به طور ناگهانی (خدای ناکرده!) باید چنین کد هایی را تغییر دهید؟ p (font-family: PTSansRegular؛ font-weight: normal؛ font-italic: normal؛ font-size: 36px؛) p قوی (فونت-خانواده: PTSansBold؛ وزن-فونت: پررنگ؛ font-italic: normal؛) p em (font-family: PTSansItalic؛ weight-font: normal؛ font-italic: italic؛) p قوی em (font-family: PTSansBoldItalic؛ font-weight: bold؛ font-italic: italic؛)

  استفاده یا استفاده نکردن از روش دوم از فونت های وب ، مسئله ای است که میزان پشتیبانی IE8 برای یک سایت خاص مورد نیاز است. به خاطر داشته باشید که سهم IE8 در حال کاهش است و روند رو به رشد خود ادامه خواهد داد.

  قلم های Google

  برای اینکه در یافتن فونت زحمت نداشته باشید ، آن را با فرمت TTF یا OTF بارگیری کنید ، آن را روی ژنراتوری مانند FontSquirrel Generator تبدیل کنید ، سبک های CSS حاصل را با استفاده از دستورالعمل های متعدد به پروژه وصل کنید.

  ، مورد دوم با استفاده از یک دستورالعمل لکونیک تر است - کافی است آن را در ابتدای صفحه شیوه ها قرار دهید تا قلم های انتخاب شده در تمام صفحات HTML اعمال شود.

  راه سوم با JavaScript ، علاوه بر پیچیدگی ، هیچ مزیت دیگری نسبت به دو مورد دیگر ندارد.

  Google برای چگالی قلم از کلمات کلیدی استفاده نمی کند

  ، و در مقیاس عددی - 100 تا 900. مقدار 400 مطابق با قلم Gentium Book Basic با وزن حرکتی نرمال است: em (font-family: "Gentium Book Basic"، serif؛ وزن فونت: 400؛ به سبک font: italic؛)

  این نتیجه گیری در فونت های وب نتیجه می گیرد.

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

قلم ها

• فونت های Google کتابخانه قلم مورد علاقه همه است. به شما امکان می دهد برای همه موارد ، فونت های مختلف را انتخاب و بارگیری کنید.
• 1001 فونت رایگان یک کتابخانه فونت است. دارای پیمایش راحت است - قلم ها به صورت الفبایی و بر اساس نوع طبقه بندی می شوند. بخشی برای قلم های روسی وجود دارد.
• Fontstruct یک سازنده فونت آنلاین است. ابزاری بسیار ساده برای ایجاد فونت خود. شما می توانید نه تنها با مربع های استاندارد ، بلکه با شکل های دیگر - نقاط ، گوشه های گرد و غیره ترسیم کنید. برای مبتدی ، یک ابزار ایده آل برای امتحان کردن و دیدن تایپوگرافی در عمل است.
• فونت سنجاب یکی از بزرگترین کتابخانه های قلم است. علاوه بر این ، می توانید تصویری را بارگذاری کرده و نام فونت های به کار رفته بر روی آن را بگیرید. یک فروشگاه فونت و حتی یک فروشگاه پوشاک با آرم وجود دارد.
• نور تایپ یک ویرایشگر فونت کاملاً برجسته است. به شما امکان می دهد قلم های OpenType ، TrueType و PostScript را ایجاد ، ویرایش و تبدیل کنید. شما باید بارگیری و نصب کنید. نسخه رایگان در مقایسه با نسخه رایگان از قابلیت های محدود برخوردار است. اما برای ایجاد یک فونت ساده کافی است.
• Font چیست - سرویس آنلاین برای انتخاب قلم های سایت. فایل فونت را بارگیری کنید ، آدرس سایت را مشخص کنید و ببینید که چگونه قلم بارگیری شده در سایت چگونه ظاهر خواهد شد. خدمات مناسب.
• 1001 قلم - کتابخانه قلم ها (بیش از 15000). پیمایش راحت - قلم را می توان با اندازه ، نوع ، موضوع ، طراحی و غیره انتخاب کرد. این منو به شما امکان می دهد خروجی را شخصی سازی کنید ، این امکان را می دهد که هر فونت را در گزینه های مختلف مشاهده کنید: اندازه ، سبک و غیره.
• Font Flame یک سرویس آنلاین برای تطبیق قلم ها برای مطابقت است. این بسیار ساده کار می کند - در صفحه اصلی جزوه ای با دو کتیبه ساخته شده در فونت های مختلف وجود دارد. دوست داشتید - "عشق" را فشار دهید ، نه - "نفرت". سپس موارد انتخابی می توانند دوباره مشاهده شوند. با کلیک بر روی نام فونت ، Google Fonts باز می شود.
• typecast - یک قلم را برای نمونه اولیه انتخاب کنید. می توانید پیش نمایش نحوه قلم در هر دستگاه را مشاهده کنید. ذکر انواع مختلف متن - عنوان ها ، نقل قول ها و غیره ضروری است. می توانید یک نوع ، اندازه ، سبک ، تورهای تنظیم را انتخاب کنید. صفحه آینده خود را در قلم هایی که نصب کرده اید خواهید دید. یک نکته بزرگ انتخاب طرح (یک یا چند ستون ، ترتیب بلوک های مختلف) است.
• Wordmark - به شما امکان می دهد فونت نصب شده در رایانه کاربر را برای متن ، آرم یا عنوان انتخاب کنید. وقتی متن را در فیلد وارد می کنید ، آن را با قلم های مختلف نشان می دهد. می توانید اندازه ، مورد ، نمایشگر سیاه و سفید یا برعکس را انتخاب کنید. گزینه هایی که دوست دارید در ترتر یا در فیس بوک منتشر شده است - در انتخاب کاربر. قابل ارسال به ایمیل است.

عکس های سهام

• Unsplash یک عکس ثابت است که به روز می شود. مجموعه ها به تم ها تقسیم می شوند. از آفریقایی آمریکایی ها تا طبیعت می توانید هر چیزی پیدا کنید. هر عکس دارای رتبه بندی خاص خود است ، می توانید بهترین یا موارد جدید را ببینید.
• FoodiesFeed - عکس غذا. تصاویر طبقه بندی می شوند. شما می توانید بهترین ، منحصر به فرد ، آیکون ها ، مدل ها و غیره را انتخاب کنید.
• عکسهای رایگان Refe - لیست عظیمی از تصاویر "زندگی واقعی". عمدتا از منظره و عکاسی از طبیعت استفاده می شود. ناوبری ناخوشایند ، تمام عکس های صفحه اصلی هنگام پیمایش ظاهر می شوند.
• Little Visuals - عکس هایی با کیفیت بالا از مناظر و ساختمان ها. می توانید بایگانی بهترین عکسهای ارسال شده برای هفته را بارگیری کنید. عکس ها دارای هشتگ هستند اما طبقه بندی نمی شوند.
• Gratisography یک کتابخانه عظیم از عکس های رایگان است. همه عکس ها به شش موضوع تقسیم می شوند: افراد ، مضراب ها ، شهرها ، اشیاء ، طبیعت و حیوانات. می توانید با کلمات جستجو کنید.
• مرگ بر روی عکس سهام - عکس های سهام. شما فقط نمی توانید نگاه کنید و انتخاب کنید. آنها یک ماه انتخاب را انجام می دهند و پس از وارد کردن ایمیل شما ، آن را بارگیری می کنند. وزن این بایگانی حدود 11 مگابایت است. بهترین عکس ها و یک لینک بارگیری به ایمیل ارسال می شود.
• فوق العاده - مجموعه بزرگی از عکس ها از زاویه غیرمعمول. ست کوچک اما جالب است.
• کتابخانه الگوهای - الگوهای و بافت. مجموعه به اندازه کافی بزرگ است ، قالب ها غیر معمول هستند. آنها با پیمایش و به تدریج جایگزین می شوند. می توانید ببینید که چگونه قالب به صورت تمام صفحه یا بخشی از آن ظاهر خواهد شد.
• سهام جدید قدیمی - عکس های پرنعمت از بایگانی. تعداد عکس های رایگان کمی وجود دارد ، اما عکس های جدید مرتبا ظاهر می شوند.
• Pexels - تعداد زیادی عکس برای همه موارد. تقسیم بر اساس موضوع ، بسیار مناسب برای جستجو.
• جی مانتری مجموعه بزرگی از عکس ها است. هیچ طبقه بندی به این ترتیب وجود ندارد ، می توانید ماه ها آن را مشاهده کنید.

سهام گرافیک

• Brusheezy - برس رایگان ، قالب ، بافت و موارد دیگر برای Photoshop. 12 دسته ، هر یک با زیر شاخه ها. انتخاب بسیار زیاد است.
• Iconfinder - آیکن های پرداخت شده و رایگان. می توانید آن را در قالب های ICO ، PNG ، ICNS ، SVG بارگیری کنید.
• Brushez مجموعه بزرگی از برس های فتوشاپ است. علاوه بر آنها ، بردارهای اولیه ، اشکال ، قالبها ، سبک ها نیز وجود دارند. هر بخش به زیربخشها تقسیم می شود. به عنوان مثال ، بیش از 20 دسته برای برسها وجود دارد.
• Vecteezy - کتابخانه ای از گرافیک های برداری ، شامل تصاویر و تصاویر. تعداد زیادی دسته بندی و تعداد زیادی از گرافیک.
• Iconbird یک سرویس جستجوی آیکن به زبان روسی است. می توانید یک موضوع را وارد کنید و مجموعه ای از نمادها را دریافت کنید ، یا می توانید بر اساس طبقه بندی فهرست کنید.
• Icons8 یک سرویس به زبان روسی است که بیش از 42000 نماد در موضوعات مختلف ارائه می دهد.

اینفوگرافیک

• Vizualize یک سرویس آنلاین برای ایجاد اینفوگرافیک "درباره من" است. در اصل ، یک رزومه گرافیکی ایجاد می کند.
• Canva ابزاری ساده برای ایجاد هر طراحی است. به شما امکان می دهد ارائه ، پوستر ، ارسال در شبکه های اجتماعی ، کتاب ، نامه ، مطالب و موارد دیگر را طراحی کنید. همه چیز بر اساس قالب انجام می شود ، متن تغییر می کند. اما الگوهای زیادی وجود دارد ، می توانید انتخاب کنید.
• Easelly - ایجاد اینفوگرافیک مبتنی بر الگو. ویرایشگر داخلی داخلی به شما امکان می دهد طرح را تغییر دهید ، عناصر اضافی را قرار دهید ، متن را تغییر دهید.
• اینفوگرام یک سرویس آنلاین برای ایجاد اینفوگرافیک و نمودارهای تعاملی است. همه ویژگی های موجود نیست ، شما مجبور به خرید یک حساب کاربری هستید.
• Visage یک ابزار ساده برای ایجاد هر نوع محتوای تصویری (نمودارها ، اینفوگرافی ها ، تصاویر وبلاگ و غیره) است. تعداد زیادی قالب ، ویرایشگر ساده. برخی از ویژگی ها پرداخت می شود.
• Gliffy یک سرویس نقشه برداری آنلاین است. ویرایشگر طبق اصل Microsoft Visio عمل می کند.
• Visme یک ابزار ارائه آنلاین و ایجاد اینفوگرافیک است. بیش از 1000 قالب. ویرایشگر به شما امکان می دهد متن (هدرها ، لیست ها ، نقل قول ها و حالت عادی) ، متن متحرک و ابزارک ها را اضافه کنید. حساب رایگان را می توان به عنوان یک پرونده JPG بارگیری کرد.
• Piktochart - ایجاد گرافیک با کیفیت بالا - ارائه ، اینفوگرافیک یا مواد چاپی. PNG ، JPG با اندازه های مختلف بارگذاری می شود.
• Drawio یک سرویس آنلاین مناسب برای ایجاد نمودار است. می توانید در dropbox و خدمات مشابه ذخیره کنید ، می توانید دیسک بزنید.
• انتقام - ایجاد آسان اینفوگرافیک ها ، پوسترها ، گزارش ها ، مطالب مربوط به شبکه های اجتماعی ، و غیره. در نسخه رایگان فقط پیوندی برای انتشار فراهم می کند. باید هزینه بارگیری را بپردازید.
• Cacoo یک سرویس آنلاین برای ترسیم نمودارها و نقشه سایت است. شاید بهترین ها از نظر قابلیت ها. تعداد زیادی ابزار و قالب. می توانید به PNG ، PDF ، SVG ، PPT و غیره صادر کنید.
• ایده آل یک سرویس رسم نمودار آنلاین است. فقط برای انتشار در دسترس است. بارگیری انجام می شود
• Lucidchart یک سرویس آنلاین برای ایجاد نمودارها و نقشه ها است. وارد کردن نمودار مایکروسافت ویسیو امکان پذیر است. به PDF ، PNG و JPG صادر شده است. قابلیت پرداختی وجود دارد.

رنگها

• Color Hunt - انتخاب ترکیب رنگ. شما می توانید حداکثر چهار رنگ را انتخاب کنید. راه حل های آماده برای انتخاب وجود دارد.
• TinEye - سایت را تجزیه و تحلیل می کند و لیستی از منابعی را که از یک تصویر از سایت استفاده می کنند نشان می دهد.
• ColorZilla - به شما امکان می دهد تا رنگ و شیب ایجاد کنید. خواص css را برای آنها چاپ می کند.
• Adobe Color CC - طرح های رنگی ایجاد کنید.
• Colicious - نوار فضا را فشار داده و رنگ جدیدی ایجاد کنید.
• Colorscheme - انتخاب طرح های رنگی. یک نسخه به زبان انگلیسی و روسی وجود دارد. به شما امکان می دهد رنگ ها را با سایت مطابقت دهید. تنظیم خوبی دارد ، کد رنگ را نشان می دهد. در نهایت به شما امکان می دهد صفحه را در طرح رنگی انتخاب شده مشاهده کنید. بزرگترین مزیت مشاهده gamut از نظر انحراف رنگ است. همچنین به شما امکان می دهد مدل های مختلف رنگی را انتخاب کنید. در پالت Gimp ، CSS ، PNG و غیره ذخیره می شود. دارای مبدل رنگی برای تبدیل از یک مدل رنگی به دیگری.
• Paletton ابزاری برای ایجاد ترکیب رنگ است. هیچ تفاوتی با Colorscheme نیست.
• نمادین - یک پالت تصویر PNG ، JPG یا GIF را تجزیه می کند. تصویری را بارگذاری کنید و مجموعه ای از همه رنگ هایی که در آن وجود دارد را دریافت کنید.
• ابزار Hex Color ابزاری برای جمع آوری رنگ است. لغزنده ها رنگ را تنظیم می کنند ، می توانید روشنایی را انتخاب کنید. سپس رنگ انتخاب شده ذخیره می شود. می توانید یک پالت را انتخاب کنید.
• (Un) clrd یک افزونه مرورگر است که همه رنگ ها را از بین می برد و سایت را به صورت سیاه و سفید ترک می کند.
• BrandColors بزرگترین مجموعه کدهای رنگی رسمی برند است. یک نام تجاری را انتخاب کنید و نام رنگ های آن را از جمله در یک فایل css بارگیری کنید.
• Colortyper - تطبیق رنگ از زاویه غیرمعمول. صفحه نمایش نمادهای چند رنگی را دارد که از هم تلاقی می کنند. نتیجه تقاطع یک رنگ جدید است. جالب به نظر می رسد

الهام

• Dribbble - بزرگترین انجمن طراحی. مشاغل ، جوامع ، ارتباطات - در اینجا می توانید هر چیزی را پیدا کنید.
• Freebbble - قالب ها و طرح ها از Dribbble. می توانید چیزی را به صورت رایگان بارگیری کنید ، چیزی بخرید. می توانید الگوهای CMS ، سازنده ها ، نمادها ، mockup ها ، الگوهای سایت طرح و موارد دیگر را پیدا کنید.
• Muzli - الهام طراحی روزانه. منبعی برای طراحان با نمونه هایی از غیر معمول ترین آثار.
• از نزدیک بهترین طراحی های طراحان هستند. به عنوان یک انجمن که در آن می توانید به سایت رای دهید سازماندهی شده است. سایت روز ، ماه ، سال و غیره انتخاب می شود تعداد زیادی از طرح ها ، فیلم ها ، تحولات.
• Design You Trust جمعی از طراحان است که آخرین روندها ، اخبار ، اوراق بهادار ، طرح ها و اعلامیه های خلاق را به اشتراک می گذارند.
• Really Good Emails مجموعه عظیمی از ایمیل های با طراحی مناسب است. یک الگوی انتخاب کنید و کد html ، css و js آن را دریافت کنید. می توانید متن ، عکس و غیره را تغییر دهید.
• Fubiz - انتشاراتی از حوزه طراحی و خلاقیت. می توانید عکس ، طرح ، گرافیک ، فیلم و غیره پیدا کنید. همه چیز به دسته بندی تقسیم می شود.
• Designspiration مجموعه ای از طرح های با الهام از Pinterest است. بسیاری از ایده ها و نمونه ها - تایپوگرافی ، آرم ها ، نامه ها و موارد دیگر.
• Behance مجموعه ای از پرتفوی حرفه ای است. می توانید جای خالی بگذارید یا رزومه کاری خود را از سر بگیرید.
• Mobile-الگوهای کتابخانه ای از تصاویر برای iOS و Android است. همه چیز به بخش ها تقسیم می شود. ایده های بسیاری را می توان یافت.
• One Page Love گالری با بهترین طراحی صفحه وب است. قالب ها و مضامین قابل خریداری هستند. همچنین موارد رایگان وجود دارد.
• Uispace یک منبع برای طراحان است. بارگیری مجانی psd، sketch، font، mockup و غیره

ویرایشگر گرافیک

• DAZ 3D - مدل سازی سه بعدی. برنامه دسک تاپ را ثبت و بارگیری کنید.
• Gimp یک آنالوگ رایگان از Photoshop است. به شما امکان می دهد یک شبکه مدولار راه اندازی کنید ، راهنماهایی بسازید ، با لایه کار کنید ، افکت بگذارید و غیره. این یک جایگزین رایگان خوب برای Photoshop است. قابل توسعه است - افزونه های اضافی قابل بارگیری هستند.
• مخلوط کن - مدل سازی سه بعدی ، انیمیشن ، رندر ، صدا ، فیلم. به شما امکان می دهد بازی ها را ایجاد کنید. ویرایشگر سریع گام ، بسیار محبوب.
• Aviary یک سرویس ویرایش عکس آنلاین است. بسیاری از ویژگی ها ، از جمله Red Eye ، تغییر اندازه و موارد دیگر.
• Pixlr یک ویرایشگر عکس آنلاین و ویرایشگر گرافیک به طور جداگانه است. دومی شبیه به فتوشاپ است. در دیسک ذخیره می شود.
• BeFunky یک سرویس ویرایش عکس آنلاین است. جلوه ها ، قاب ها ، گرافیک ها ، روتوش و موارد دیگر. یک رابط به زبان روسی وجود دارد.
• Inkscape یک ویرایشگر گرافیکی کامل وکتور منبع باز است. پشتیبانی از قابلیت های فرمت SVG - کار با اشکال ، طرح ها ، متن ، وکتورسازی گرافیک های شطرنجی ، و غیره علاوه بر پردازش تصاویر برداری ، به شما امکان می دهد یک قالب سایت ایجاد کنید و آن را برش دهید - یک شبکه مدولار موجود است. به شما امکان می دهد زمینه های ، بنرها ، آرم های برداری و غیره را ترسیم کنید.
• IconEdit2 یک برنامه نقاشی آیکون بسیار ساده است. دارای فیلتر است. به شما امکان صادر کردن تصویر برای Android و Apple را می دهد. می توانید عمق رنگ را تنظیم کنید ، آیکون را بچرخانید و تنظیم کنید. پشتیبانی از شفافیت ، چندین تصویر در یک پرونده ICO و ضد حساسیت در کلیه ابزارهای نقاشی.
• Falco GIF Animator برنامه ای برای ایجاد انیمیشن های با گذشت زمان و آیکون های متحرک است. شما می توانید بسیاری از برنامه های مختلف را بر روی منبع بارگیری کنید.
• Krita یک ویرایشگر رومیزی منبع باز حرفه ای است. برای سیستم عامل های مختلف موجود است.
• Boxy-SVG یک ویرایشگر گرافیکی بردار شبیه به Adobe Illustrator ، Sketch و Inkscape است.
• Photopos یک برنامه چند منظوره با توابع یک ویرایشگر عکس ، یک ویرایشگر گرافیک و یک برنامه کاربردی برای ایجاد گرافیک رایانه است.
• 5Dfly یک برنامه پردازش عکس دسته ای رایگان است. می داند چگونه می توان اسلایدها را برای پاورپوینت ایجاد کرد. همچنین می توانید مبدل PDF را بصورت جداگانه بارگیری کنید.
• PaintStar یک ویرایشگر تصویر رایگان است. رابط کاربری بسیار شبیه به Paint است ، اما گزینه های بیشتری وجود دارد. به عنوان مثال ، لایه ها.
• PhotoScape یک ویرایشگر عکس ساده است. دارای عملکردهایی برای تنظیم روشنایی و رنگ ، تعادل رنگ سفید ، تصحیح برجسته ، فریم ، بادکنک ، حالت موزاییک ، اضافه کردن متن ، ترسیم تصاویر ، برداشت ، فیلتر ، برداشتن چشم قرمز ، رنگ آمیزی ، قلم مو ، تمبر کلون ، برس اثر و غیره است.