Тестуємо онлайн-сервіси

576
  • Фон для сайту — де знайти і безкоштовно скачати
  • Створення смугастого або картатого фону
  • Як змінити розмір фото онлайн без шкоди для якості
  • Як стиснути картинки (фото) онлайн
  • Онлайн сервіси для підбору поєднаних кольорів
  • Перевірка сайту при різних дозволах екрану в ViewLike
  • Автоматичне заокруглення країв зображень у
  • Здрастуйте, шановні читачі блогу . Сьогодні розмова піде про те, де можна знайти підходящий фоновий малюнок для свого сайту, а так само протестувати швидкість завантаження сайту, про нові можливості онлайн перекладача Google і сервіс, що надає всю інформацію про вашому або чужому блозі. Так, ще поділюся з вами знайденими мною дуже красивими сирними RSS іконками. Приступимо.

    Тестуємо онлайн-сервіси

    Фон для сайту — де знайти і безкоштовно скачати

    Є багато способів знайти підходящий фоновий малюнок для свого сайту. Можна набрати відповідний запит в Яндексі або в Google і подивитися, які варіанти пропонують завантажити знайдені таким чином ресурси.

    Але це дуже довгий спосіб, оскільки вам доведеться перелопатити велику кількість картинок, часто взагалі не відповідають вашому уявленню про красивому фоні. Можна піти іншим шляхом і намалювати потрібний постер в Фотошопі (тут ви знайдете його безкоштовну онлайн версію), але знову ж таки не всі це вміють.

    Мені більше припала до душі ідея створення потрібного вам фону онлайн, за допомогою простих інструментів, освоїти які ні в кого не складе праці. Це своєрідні конструктори, зрозумілі і доступні практично всім. В своїй практиці я використовую ava7patterns. Якщо хтось знає ще подібні онлайн-сервіси, то буду дуже вдячний, якщо ви напишіть про це в коментарях.

    Розповім про роботу по налаштуванню потрібного фону на прикладі. Коли ви потрапляєте на головну сторінку Bgpatterns, то бачите дві частини — верхню і нижню.

    У нижній частині ви можете подивитися готові варіанти, які створили інші відвідувачі даного конструктора і порахувавши їх вдалими, зберегли для загального огляду і використання. Верхня область як раз і являє собою конструктор фонів. Зліва розташовано вікно для тонкої настройки колірної гами, малюнка, текстури і кута повороту малюнка.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    На першій вкладці «Colors» ви можете вибрати два кольори — для самого фону для малюнка, який буде розташований на ньому. На вкладці «Canva» ви вибираєте тип і різкість відображення текстури (наприклад, можна домогтися ефекту малюнка на грубій тканині тощо).

    На вкладці «Image» ви можете вибрати малюнок (який стане потім фоновим), налаштувати його розмір у полі «Image scale», розташування у полі «Location» і прозорість у полі «Image opacity». На вкладці «Rotate» можете повернути малюнок навколо своєї осі на будь градус.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Після того, як ви закінчите з налаштуваннями, можна подивитися, як буде виглядати створений вами фон на сторінці. Для цього натисніть в правому вікні за посиланням «Apply background». Ваш шедевр буде застосовано до всієї верхній частині сторінки цього онлайн сервісу.

    Якщо вас все влаштовує, то тисніть на посилання «Download image» для збереження фонового малюнка на своєму комп’ютері. Тепер ви можете використовувати створений таким чином постер в себе на сайті, просто поставивши його в налаштуваннях вашого шаблону (тут про шаблону для Joomla 1.5 ви знайдете інформацію).

    Якщо ви вважаєте, що у вас вийшов шедевр і хочете поділитися своїм творінням з іншими відвідувачами даного ресурсу, то натисніть на посилання «Save to My patterns». Робота з конструктором фонів ava7patterns схожа по суті на те, що я описав вище. Думаю, що ви розберетеся самі.

    Створення смугастого або картатого фону для вашого сайту

    Такі конструктори досить специфічні, бо два з них створюють фони (під вашим чуйним керівництвом) у смужечку і один в клітинку. Незважаючи на настільки вузьку спеціалізацію або, навпаки, завдяки їй, налаштувати полосочках і клітинках можна багато чого.

    Stripe Generator 2.0 призначений для створення смугастого фону. Налаштувань дуже багато. Можна змінювати кольори, ширину смуг, кут нахилу смуг і багато чого ще.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Після внесення будь-яких змін в налаштування, вам потрібно буде натиснути у вікні «preview» на що з’явилися круглі стрілки.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    У результаті цього дії, внесені вами зміни в налаштуваннях відобразяться у вікні «preview». Ну, а для збереження створеного фонового малюнка вам потрібно буде натиснути на кнопку «download». Ви так само можете ознайомитися з шедеврами, створеними іншими відвідувачами сервісу і при бажанні використовувати їх на своєму сайті.

    Для цього необхідно зайти в галерею фонів для сайту, клацнути по вкладці «Your Stripes» вгорі сторінки.

    Stripemaniya теж призначений для створення смугастого фону сайту. Його інтерфейс і надані їм можливості дуже нагадують Stripe Generator 2.0, описаний раніше.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Інструменти для налаштування використовуються трохи інші, але принцип залишився той же. Після того, як ви внесете якісь зміни в налаштування у вікні preview» чорна смужка з написом «refresh preview». Тільки після натискання на цю смужку ви зможете побачити внесені зміни.

    Для збереження створеного вами фонового малюнка служить кнопка «Download this strip», а для перегляду фонів, створених іншими користувачами сервісу, потрібно натиснути на посилання «Stripe.licious» вгорі сторінки.

    TartanMaker призначений для створення картатих фонів. Управління та налаштування на цьому конструкторі аналогічні описаним вище.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Для того, щоб побачити вироблені у налаштуваннях зміни, потрібно у вікні «preview» натиснути на напис «make it». Для збереження файлу з створеним вами фоном служить кнопка «Download», а для перегляду фонів, створених іншими користувачами сервісу, вам потрібно буде натиснути на вкладку Gallery вгорі сторінки.

    Як змінити розмір фото онлайн без шкоди для якості

    У світлі останніх тенденцій напрямки розвитку інтернету, на даний момент, одним з важливих факторів, за якими пошукові системи оцінюють і, можливо, ранжують ресурси, є швидкість завантаження сторінок .

    У всякому разі, в інструментах для вебмайстрів від Google, з’явився пункт «Ефективність сайту», де відображається графік середнього часу завантаження сторінок вашого ресурсу.

    Але найпоширенішою причиною великого часу завантаження сторінок є не оптимізовані зображення, використовувані на цих сторінках. Я не говорю про зовсім неписьменною вставки картинок в Html код. Хоча показовий приклад все ж таки наведу.

    Один мій знайомий знав, що розмір фотографій на сторінці можна задати за допомогою атрибутів тега IMG під назвою WIDTH і HEIGHT (читайте детальніше про вставлення за наведеною трохи вище лінком). Це він знав, тому завантажив графічні файли на сервер в якусь там папку. Прописав в потрібному місці HTML коду теги IMG, вказавши шляхи до файлів та не забувши вказати атрибути WIDTH і HEIGHT, які визначають ширину і висоту фоткам.

    Тобто зробив все правильно. На сайті йому потрібно було відображати зовсім маленькі картинки і він поставив їх розмір у WIDTH і HEIGHT. Але яке ж було його здивування і розчарування, коли ці мініатюри (десь близько 100 на 100 пікселів) вантажилися дуже довго, плавно і дуже повільно прорисовываясь.

    Вся справа була в тому, що вихідні графічні файли, завантажені на сервер, не те що не були оптимізовані, про це мови не йшло — вони мали гігантське дозвіл в кілька тисяч пікселів по ширині і висоті. Але він вважав, мабуть, що сервер сам повинен був зменшити фотографії до заданих їм розмірів атрибути WIDTH і HEIGHT.

    Тому, пам’ятаючи про сумний досвід мого товариша, хочу закликати вас уважніше ставитися до оптимізації графіки, використовуваної на своєму проекті.

    Чим менше будуть важити графічні файли, тим буде краще для вас і вашого сервера. Тобто, по-перше, їх фізичні розміри повинні відповідати розміру, що задається в атрибути WIDTH і HEIGHT, якщо ви ці атрибути використовуєте. А по-друге, існує маса можливостей зменшити вагу файлу з зображенням практично без збитку для якості.

    Отже, зустрічайте PunyPNG, який простий до неподобства — завантажуєте з допомогою кнопки «Upload images» зі свого комп’ютера фото, яке потрібно оптимізувати (його розмір не повинен перевищувати 150 кілобайт) і через кілька секунд вам відкриється вікно, де ви зможете скачати вже оптимізоване зображення:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    При цьому буде приведено як процентне, так і абсолютне значення зменшення ваги файлу з фото. Погіршення якості фотографії на око визначити не вдалося, що дуже навіть здорово. На скріншоті (тут я писав як їх робити Snagit), наведеному вище, перше фото було попередньо оптимізовано в графічному редакторі, а друге ніякої оптимізації не піддавалося. Загалом результат вражаючий, особливо з урахуванням зберігся якості фотографії.

    Для того, щоб оптимізувати наступне фото, знову натисніть на кнопку «Upload images» і знайдіть файл з картинкою у себе на комп’ютері. Всі оптимізовані за допомогою онлайн сервісу PunyPNG фотографії не обов’язково завантажувати поодинці, можна завантажити їх все в одному архіві, натиснувши на кнопку «Download» у рядку «Total Savings».

    Загалом все дуже зручно, без всяких там надмірностей. PunyPNG підтримує формати зображень PNG, JPEG та GIF.

    Як стиснути картинки (фото) онлайн

    Я вже наводив приклади ресурсів, що дозволяють провести оптимізацію фото трохи вище. Але ідеальних варіантів не буває, тому я хочу запропонувати на ваш розгляд ще один варіант, що дозволяє стиснути картинки з вашого сайту, тим самим прискоривши завантаження сторінок.

    Ви, звичайно ж, можете стиснути картинки, наявні на вашому ресурсі з допомогою спеціалізованих програм або ж в популярних графічних редакторах.

    Але бувають ситуації, коли використання онлайн-сервісів по стисненню картинок є найбільш прийнятним і зручним варіантом. Сьогоднішній герой надано дуже відомої в світі інтернету компанією — Yahoo. Цей сервіс називається Smush.it.

    Робота з цим онлайн оптимізатором, що дозволяє стиснути мають у вас картинки, дуже проста і зручна. На сторінці, що відкрилася, вам потрібно буде перейти на вкладку «Uploader» і натиснути на кнопку «Select Files and Smush». Далі потрібно буде вибрати на своєму комп’ютері одну або кілька фото (утримуючи Ctrl на клавіатурі можна виділити кілька картинок) і натиснути кнопку «Відкрити».

    Вибрані вами фотографії будуть завантажені з вашого комп’ютера на Smush.it, який тут же зробить їх оптимізацію (дозволить стиснути картинки) і вам буде представлена зведена таблиця завантажених вами зображень із зазначенням ступеня стиснення:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Для зручності скачування вже стислих фоток можете поставити галочку в полі «Keep directory structure in zip file», щоб всі оброблені картинки були поміщені в один ZIP архів. Для скачування їх на свій комп’ютер вам достатньо буде натиснути на кнопку «Download Smusshed Images» і вибрати місце для збереження.

    Стиснути — це значить без значного погіршення якості картинки максимально зменшити його розмір (вага). Для цієї мети ви можете використовувати спеціальні програм для роботи з графікою. Найвідомішою з яких, звичайно ж, є Фотошоп (тут я розглядав онлайн версію фоторедактора по функціоналу нагадує Фотошоп, але безкоштовну).

    Але його освоєння вимагає часу і сил. Однак, зовсім не обов’язково застосовувати Фотошоп. Достатньо буде простої вьювера, наприклад, FastStone Image Viewer.

    Просто відкриваєте потрібне фото в FastStone Image Viewer і вибрати з контекстного меню «Зберегти як», а потім натискаєте внизу діалогового вікна збереження на кнопку «Options». У вікні, в залежності від формату вашої фотографії, з’являться ті чи інші можливості змінити якість і розмір збереженого зображення (читайте про поліпшення якості фото в онлайн-редакторах).

    Спробуйте різні варіанти, тим більше, що результат проведених змін відразу з’явиться в правому вікні «Після». І ви його можете порівняти з оригіналом у вікні «Перед». Зображення у форматі PNG при зменшенні кількості використовуваних квітів до 256 можуть зменшитися в розмірах у два-три рази.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Практично теж саме можна зробити скориставшись онлайновим сервісом для стиснення фото Online Image Optimizer від Dynamic Drive, який може вам знадобитися, якщо під рукою немає програми для роботи з графікою. Цей онлайн сервіс являє собою інтернет-інструмент для стиснення зображень з погіршенням якості.

    У нього є обмеження за розміром графічного файлу — не більше 300 кб. Для стиснення фотографії потрібно або вказати Url картинки, яку ви хочете оптимізувати, в полі «Enter the url of an image», або завантажити фото зі свого комп’ютера, натиснувши кнопку «Огляд» в полі «upload one from your computer». Потім з випадаючого списку «convert to» ви можете вибрати формат вихідного файлу зображення ( GIF, PNG, JPG — читайте про відмінності форматів растрової графіки) і потім натиснути на кнопку «Optimize».

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Все, в результаті ви отримуєте ряд стислих фоп. Причому, кожне наступне в цьому ряду зображення буде важити менше попереднього, але і якість його теж буде гірше. Ви повинні вибрати те фото, співвідношення розміру і якості якого вас найбільше влаштовують. Для його збереження вам достатньо буде просто клацнути по ньому правою кнопкою миші і з контекстного меню вибрати «Зберегти малюнок».

    Онлайн сервіси для підбору поєднаних кольорів для сайту

    Якщо у вас немає задатків дизайнера, то підібрати кольорову гаму для свого сайту, яка б спонукала відвідувачів довше не ньому затриматися, а не, навпаки, скоріше закрити сторінку, не так-то вже й просто.

    Можна, звичайно, вдатися до послуг професійного дизайнера, але це буде коштувати грошей, яких може і не бути на початковому етапі розвитку проекту. Тому в якості компромісу ви можете скористатися одним з декількох онлайн сервісів по підбору поєднаних кольорів для оформлення вашого ресурсу.

    Взагалі, вважається правильним використовувати на сайті три основних кольори. Використання більшої кількості кольорів може створити відчуття строкатості і відштовхнути відвідувачів, а використання менш трьох основних кольорів здатне зробити ваш проект кілька бляклим.

    Один з кольорів буде превалювати на сторінці (займати велику площу) і буде задавати загальний тон, при цьому другий основний колір вибирається зазвичай близьким до першого, для того, щоб доповнювати його. Ну, а третій зазвичай вибирають контрастним до першим двом основним. Його використовують для виділення та акцентування уваги ним не слід зловживати.

    Але знання теорії зовсім не полегшує підбір поєднаних кольорів на практиці. Тому для вирішення такої складної естетичної задачі можна скористатися одним з онлайн конструкторів з підбору поєднаних відтінків.

    Наприклад, на The Color Wizard, для того, щоб підібрати поєднуються кольору, потрібно буде спочатку вказати код основного кольору. Якщо ви не знаєте код цього кольору, то тут ви знайдете пояснення та багато програм з визначенням (захоплення) кольору на екрані.

    Якщо ви знаєте, який відтінок буде основним і переважаючим, то для підбору поєднаних з ним кольорів вам потрібно буде виконати наступні дії. У полі «Enter hex code» вставити код основного відтінку, потім виберете спосіб формування поєднаних з ним «Complimentary», натиснувши на відповідну кнопку внизу вікна програми підбору кольорів.

    Ну, а потім натисніть на кнопку «SET», розташовану поряд з полем для введення коду основного кольору.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    В результаті в області «Suggested colr schemes» відобразяться квадратики з вашим зазначеним основним відтінком і двома сполучаються з ним квітами. Над цими підібраними варіантами будуть написані їхні коди, які ви можете скопіювати і використовувати на своєму ресурсі.

    Якщо ви ще не визначилися з основним відтінком, то скористайтесь кнопкою «RANDOMIZE», натиснувши на яку ви зможете згенерувати випадковий набір поєднаних один з одним кольорів. Клацніть на цій кнопці, до тих пір, поки не побачите той набір відтінків, який вам сподобається. Скопіюйте отримані коди для їх подальшого використання у себе на сайті.

    Окрім The Color Wizard існує ще ряд подібних конструкторів, наприклад, дуже зручні ColorMixers і Color Scheme Designer.

    Перевірка сайту при різних дозволах екрану в ViewLike

    Іноді стає цікавим, як буде виглядати ваш інтернет проект при тому або іншому дозволі екрану. Перевірити це фізично не завжди надається можливим і в цьому випадку вам може знадобитися простенький онлайн сервіс, який з легкість покаже, як буде виглядати ваш ресурс на екранах з різним дозволом (починаючи з iPhone і закінчуючи 1920×1200).

    Він називається ViewLike і вам потрібно буде лише ввести доменне ім’я (без http://) свого сайту в поле «URL» і пройтися по вкладках з відповідними дозволами екрану:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Автоматичне заокруглення країв зображень у

    Дуже простий і зручний ресурс, що дозволяє заокруглені краї у будь-яких завантажених картинок і фотографій. На головній сторінці RoundPic потрібно буде використовуючи кнопку «Огляд», завантажити зі свого комп’ютера графічний файл, у якого потрібно заокруглити кути. Або ж можна вказати в полі «URL» шлях до зображення, що знаходиться у інтернеті. Після цього натисніть на кнопку «Round it».

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    На сторінці, що відкриється, ви можете побачити результат роботи при стандартних налаштуваннях. Але дещо можна налагодити у вікні бузкового кольору:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Ви можете в області «Corners» зняти галочки з тих кутів, скругляющі які не вимагається.

    В області «Image» вам надається можливість змінити розміри результуючого графічного файлу (якщо поставити галочку «constrain proportions», то при зміні одного з розмірів будуть зберігатися пропорції зображення) і його якість (погіршуючи якість до допустимих для вас меж, ви тим самим зменшуєте вага).

    У полі «Round» ви зможете вибрати найбільш підходящий вам радіус скруглення кутів. На даний момент, готові зображення можна зберігати у форматах JPG (за замовчуванням) і PNG (для цього потрібно поставити галочку в полі «Transparent PNG».

    Після завершення всіх налаштувань натисніть на кнопку «Preview». Якщо результат вас влаштує, то для його завантаження натисніть на кнопку «Download» над превьюшкой. В перспективі у даного інструменту додавання тіні і рамки до фотографій, а так само розширення форматів для збереження результуючих файлів.

    Господа і не кажіть мені, що Фотошоп рулить, а такі сервіси нафіг не потрібні. Потрібні, та ще й як потрібні. Особливо для тих, хто з великим і жахливим фотошопом (тут без жодних алегорій, саме так і є — великий по наданих можливостей і жахливий за складністю освоєння і засвоєння) не дружить.

    Все-таки фотошоп — це професійний інструмент, що, до речі кажучи, скажених грошей. Мені такі маленькі сервіси подобаються і я буду продовжувати про них писати.

    Serenity — просування сайтів, професійний, але не безкоштовний

    Я досить багато останнім часом пишу про безкоштовні способи просування сайтів за рахунок отримання безкоштовних зворотних посилань з трастових ресурсів. Але такий спосіб просування підійде далеко не кожному проекту, особливо якщо він комерційний.

    Удачі вам! До зустрічей на сторінках блогу