今日はアプリのモックアップなどを作成する時に便利なTipsを紹介します。 例えばこの状況で、headerの色やボタンの色に変更が入ったら、とっても面倒ですよね。ページがたくさんあればなおさらです。 沢山あるオブジェクトをひとつひとつ選択して色を変更しても良いですが、実はこの作業はもっと時短できます。 共通の塗りをまとめて変更する2つの方法 時短の方法は2つあります。Illustratorって便利ですね。 方法1：何度も使用する色を「グローバルなカラー」としてスウォッチに登録す […]
こんにちは。工藤です。 今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。 1.jQuery本体とjquery.lazylinepainterを読み込ませよう とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。 2.SVG画像を読み込ませてサイト上からコードを作成 サイトをスクロールした箇所にSVG画像を読み込ませるエリアがあります。そちらにillu […]
今回はこちらのペンギンの写真に帽子をかぶせる合成をしてみましょう。 ペンギンの写真は青みのトーンが強く、女性の写真は赤みの強い写真なので、このまま切り抜いて合成してしまうと帽子が浮いて見えてしまいます。 そんな時にはphotohsopの「カラーを適用」という機能が大変便利です。カラーを適用の機能について、使い方をお話ししたいと思います。 手順 大まかな手順は下記です。10分程度の作業で完成します。 1.合成元の写真と、合成したい写真、両方のファイルを開く 2.合成したい写真に […]
2018年度、戌年のWeb年賀状を作成しました！ 文章や住所を書き換えて、お手持ちのサーバへアップすれば、簡単にWeb年賀状を作成できます。 後は丁寧な文言でメールにてURLを送ればOK完了です。紙の年賀状を刷らなくても良いのでコスト削減にも。 商用利用OKです。ぜひご利用ください。 DEMO zipファイル 更新方法は以下をご一読ください。 更新できる箇所 ①あいさつ文 ②署名 ③画像 ④会社ロゴ ⑤住所 ⑥URL zipを解凍すると、「inde.html」というフォルダが […]
こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 […]
昨今、もう切っても切り離せないWEBやアプリ。私自身職業柄、デザイナーの知り合いが多く、良くWEBの注意点を質問されることが多いです。今回はその注意点と、簡単な説明をしてみたいと思います。 対応の端末を事前にしっかりと確認する 事前に確認しておかないと後で工数が予想外に増えてしまったりしてしまうので要注意です。 レスポンシブデザインが主流になりつつある昨今、「スマートフォン専用サイトも必要」と言われれば、デザインを2種類起こす必要が出てきます。タブレット専用も欲しいと言われれ […]
今回も自作背景を作っていきましょう。今日のテーマは「星空」。 手順 01.星を散らす 02.空の写真を調整・合成する 実はとても手順が少なく、カンタンに作成できます。 01.星を散らす まずは画面に星を散らしていきます。まずは下準備。白一色のカンバスを用意します。 色の設定をします。 描画色を白、背景色を黒にします。 「フィルター」＞「フィルターギャラリー」＞「ちりめんじわ」を選択し、下記のように適用します。 これだけでだいぶ星空にらしくなりました。 02.空の写真を調整・合 […]
ここにこういう素材が欲しい…けれどちょうどよい素材が無い。そんな時は自分で素材を作ってしまいましょう。 今日はphotoshopで空を描きたいと思います。素材は沢山作り方のチュートリアルがありますが、今回は私なりの方法をご紹介します。 サイトに使いたい写真の空を思い浮かべて… 慣れれば短時間で作れますし、どんどん応用が利くと思います。 手順 01.ベースの青グラデを作る 02.雲のベースを大まかに描く 03.雲の影を入れていく 04.ぼかす 05.遠景を追加 06.レイヤーを […]
今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。
こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるようです。 pngからAiのようなベクター画像も用意されており、サイズや色を調整してからのダウンロードも可能です。 Icon rainbow 上記のicooon-monoさんと少々似ていますが、こちらはどちらかというとイラストのテイ […]
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 日本語サイト I/O 3000 国内外問わずサイトが集められています。 メニューに『シャッフル』があるのが地味に魅力的です。 81-web MUUUUU.ORG 縦長のサイトをメインに掲載しているサイトです。 ARTNOC.COM S5-Style ページャーがないので、スクロールざっと見たい時なんかは便利なサイトです。 Japan Web Design Gallery Web Des […]
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了です。 服や小物の色を調整する 聴診器がおもちゃみたいな色なので、調整します […]
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 画像で作成 Loader Generator シンプルで使い勝手のいいローディングのGIF画像を作ってくれます。 作成の際の操作もシンプルで分かりやすいです。 Preloaders 無料・有料含めかなりの数のローディングが用意されています。 画像の作成もGIFとPNGで選んで用意できるのがいいですね […]
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 全写真共通 写真の輪郭をくっきりさせる 室内の写真なんかでありがちな、トーンカーブやレベル補正ではちょっと足りないという時に最適です。 今回はこの写真を使用し […]
こんにちは、工藤です。 今回はページ全体のスクリーンショットを撮るのに便利なプラグインをご紹介します。 Chrome・Firefox向けです。 Awesome Screenshot Plus ChromeFirefox 個人的にお世話になっている『Awesome Screenshot Plus』です。 とにかくかゆいところまで手が届きます。ブラウザの画面上はもちろん、デスクトップ画面までスクリーンショットを撮ることができます。 日本語化はされていないようなのですが、簡単な英語 […]
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 フリーソフトを使って作成します。 2016年11月現在 […]
今年に入ってから新しいお客さまとの受託制作や、社内のWebサイトの制作を行っていて、デザインの進め方の難しさを改めて痛感しています。 デザインに対してのこだわりというのは、担当者によってかなり温度差があり、自分も含めてこだわりの強い方だとデザイン制作はかなり難航します。 難航する理由として、ひとつはデザイナーの個性やセンスとの相性問題があります。 デザイナーも人間ですので、その人なりの個性やセンスがあります。そこが合わないとなかなかお客様の欲しいデザインに近づけなかったりしま […]
練習も兼ねて、水彩のデザイン素材を作ってみました。 photoshopで作りました。商用可です。 ダウンロードはこちらから ピンクの丸 青い丸 みどりの丸 コーヒー豆 グルメなかんじ 歯医者
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよ […]
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can […]
特色印刷ってご存知でしょうか。 通常の印刷ではCMYKの4色のインクを使用しますが、それ以外にも様々なインクの種類があります。 DICやPANTONEなどのインクを「特色」と呼びます。蛍光インクや白インクなんかも特色ですね。CMYKの4色では出せない風合いの色味が出せたり、面白い仕上がりになります。 そしてこの印刷手法、ものによってはインク代の節約になったりします。印刷所さんで取り扱いがあるか確認は必須ですが、単純に4工程になるCMYKより、2工程で済む方が手間もインクの量も […]
こんにちは、工藤です。 アプリのアイコンって割とサイズを用意しないといけなくて、何を用意したのか作業中よくわからなくなったりします・・。 今回はアイコンのリサイズを一気に行ってくれるサービスと簡単ではありますが使い方をご紹介します。 App Icon Resizer サイトへ 使い方 使い方はとても簡単です。 まずは赤枠内にアプリのアイコンにしたい画像をアップします。 推奨サイズは1024×1024pxです。 次に画面下部でアイコンを作りたい対象やサイズにチェックを入れます。 […]
Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。 URLが見慣れない形に 通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。 下記は当社の位置表示なの […]
今回は活字風の文字の加工を行うチュートリアルです。エッジに潤いのある加工で、シリアスな雰囲気を出したい、温かみを出したい、様々な雰囲気の演出に使用できます。 ビットマップデータのみで良い場合は、photoshopだけで済みます。パスデータにしたい場合は、Illustratorでひと手間加えると綺麗なパスが出来上がるので試してみて下さいね。 手順 ざっくり説明すると、以下のカンタン4手順。 ・文字ツールで文字を作成 ・文字をラスタライズ ・フィルタ効果：はね ・フィルタ効果：ス […]
こんにちは、工藤です。 この度こちらの『モノづくりブログ』をリニューアルしました。 コンテンツも多くなってきたため、それらをシンプルかつ見易くまとめることが目的でした。 今回は前のブログと比較しつつ、色々とご紹介できたらと思います。 TOPページ 見た目についてはよりシンプルに、どちらかというとコンテンツの写真や画像を活かすようなものになりました。 前より線が細い印象になったかと思います。 コンテンツの並びについては、以前は新着の記事を並べていただけだったのですが、今回は新着 […]
運営会社:株式会社8bit
制作サービス
運営サービス
