タグ

ブックマーク / liginc.co.jp (7)

  • ファビコン(favicon)とは?代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。 また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。 作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。 複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。 各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です

    ファビコン(favicon)とは?代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 苦手を克服!効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。デザイナーのハルエです。 最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。 ほんと健康って大事。 さてWEBデザイナーのみなさん、フォームのデザインって悩みませんか? 登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。でもコーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。 でも、サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持

    苦手を克服!効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG

    こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた

    Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
  • Photoshopでお手軽に手書き風にする小技 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    知ってる人は知っている、でも案外知らない人もいるのでは? というPhotoshopの小技を自分のメモがてら紹介してみたいと思います。 今回は画像を手軽に手書き風にする小技です。 最初はつるっとしているシェイプに・・・ レイヤースタイル「光彩(外側)」をかけ、以下のように設定します。 適用後はこんな感じになります。 光彩いじるだけなのでお手軽です。 ちょっとデザインをやわらかくしたい時なんかに使うと効果的ですよ! LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。 Webサイト制作の実績・料金を見る

    Photoshopでお手軽に手書き風にする小技 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • photoshopで紙っぽい質感を簡単に表現する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    今回はつるっとしたオブジェクトを簡単に紙っぽくする方法をご紹介します。 01:境界をざらざらにする まずは長方形ツールで白い四角形を描きます。 次に長方形の選択範囲を選択して、クイックマスクモード(ショートカット:Q)に切り替えます。 クイックマスクモードの状態で、フィルタ→ピクセレート→水晶を選択します。 クイックマスクを解除すると(もういちどQを押す)と選択範囲がギザギザになっているので、その状態でレイヤーマスクを追加します。 紙がギザギザになりました!ついでにドロップシャドウもやんわりかけちゃいましょう。 02:紙をしわくちゃにする 次は紙のしわくちゃした質感を表現します。 ギザギザ部分を選択して(Ctrl+レイヤーマスクサムネイルクリック)、新規レイヤーを追加したあと、黒→白のグラデーションをランダムにかけます。 補足:グラデーションの描画モードは「差の絶対値」にしてください。その

    photoshopで紙っぽい質感を簡単に表現する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。sekoです。 昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。 その際、とても重要となるのがウェブサイトにOGPの設定することです。 今回はOGPについて紹介していきます。 OGPとは OGPの正式名称は”Open Graph Protocol”と言います。 facebookやmixi、google+などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。 例えばfacebookにおいて、OGPを設定していないサイトで「いいね!」を押すと「〇〇さんがリンクについていいね!と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。 しかしOGP設定をしたサイ

    Facebookでのウケ方が段違い!もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • フラットデザインに使える無料アイコンセット19選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    フラットデザイン、今や大きなトレンドとなっています。 これまであれだけ「Skeuomorphismデザイン」を推進してきたAppleでさえ、iOS 7からフラットデザインを採用し始めました。潮流とは儚いものですね。 フラットデザインの特徴上、見た目がシンプルで質感を要しないので、制作するのに「Skeuomorphismデザイン」ほど時間がかからず大量生産できちゃいます。なので、質の高いアイコンセットを選りすぐるのには結構時間がかかります。 ということで、今回はそんな「フラットデザイン」に使えるエレガントなアイコンセットを20個集めてみました。参考になればと思います。 フラットデザインに使える無料アイコンセット20選 5 Flat Popular Browsers Icons Set PSD https://gooloc.com/5-flat-popular-browsers-icons-s

    フラットデザインに使える無料アイコンセット19選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1