はてなブックマーク

こんにちは、WEBデザイナーの板垣です。 最近、WEBサイトで動画やアニメーションを目にする機会が大変増えてきており、また、制作のご要望でも複雑なアニメーションが増えてきているように感じます。 以前もHTML5 Canvasを使用したアニメーションの記事をいくつか書かせていただきました。 湯気アニメーションについて本気出して考えてみた Canvasを使った動きのあるWebサイト・ホームページ制作をご希望の方へ ただ今回はCanvasではなく、『SVG』でいろいろ変わったアニメーションを作成しようと思います。 SVGについて SVG（Scalable Vector Graphics）とは、よく使われる写真などの「ラスタ形式」の画像とは違い、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」の画像フォーマットの事です。 私自身は、よく、Adobe Illustratorでパスを

Custom Field Suiteで多階層ループの呼び出し方 どうも、ぺとらです。 WordPressのカスタムフィールドを追加するのによく使う「Custom Field Suite」にお世話になっています。 「Custom Field Suite」の素晴らしい所は、ループを利用できると言う所！ 「Advanced Custom Field」も便利で使うのですが、こちらの場合は有料アドオンになってしまうのです……。 「Custom Field Suite」の使い方や、基本的な呼び出し方法は他でも分かりやすく紹介されていますが、 通常のループの場合 通常の単独ループの場合は <?php $fields = $cfs->get('loop'); //親ループ foreach ($fields as $field) : ?> <div><?php echo $field['field_name

Photoshopで桜吹雪を散らすブラシの作り方講座 どうも、ぺとらです。 今回はPhotoshopで桜を描く方法＋描いた桜を使用して桜吹雪を散らす方法について紹介していきたいと思います。 ブラシの設定をするだけで誰でも簡単に桜吹雪のブラシが作れてしまうので、是非実践してみて下さいね。 またブラシで設定するだけでなく、桜を実際に描くメイキングもおまけで描いてみました。 こちらも簡単にマウスでも書ける内容ですので、是非チャレンジしてみて下さい！ では、桜吹雪ブラシの作り方から参りましょう！ Photoshopで桜吹雪のブラシの作り方 まずは桜の花びらを、パスツールをシェイプにして描きましょう。 （パスツールが苦手な人はブラシでもOKです） こんな簡単な花びらで大丈夫なので続いて、この描いた桜の部分だけをトリミングします。 トリミングのやり方は「イメージ」→「トリミング」で、作成した桜の花びら

水滴をPhotoshopとIllustratorで作る方法 どうも、ぺとらです。 PhotoshopやIllustrator使ってますか？ 今回は前回の「Photoshopで桜吹雪を散らすブラシの作り方＋桜メイキング」に続いてじゃありませんが、言ってる間に梅雨が来ると思われるので、水滴の簡単な作り方を紹介したいと思います。 ではまず、Photoshopで水滴を作る方法から見ていきましょう。 Photoshopで水滴を作る方法 まず、水滴がついた事がわかりやすい様に、葉っぱの写真素材を用意し、その上に新規レイヤーを作成して作りたい水滴の形をブラシツールで普通に描いていきます。 ちょっと楕円っぽく崩していますが、難しければ丸でもオッケーです。 水滴を描いたレイヤーのスタイルを調整します。 シャドウ（内側）で描画モードを「スクリーン」にして、不透明度を「90％」に変更します。 角度は光源を意識し

Photoshopでコスプレ時のレタッチを紹介する講座 どうも、ぺとらです。 Photoshop記事がレイヤーさんに人気だったので、今回はPhotoshopでできる、簡単な写真のレタッチ方法について紹介していきたいと思います。 Photoshopで肌を綺麗にする 以前書かせて頂いた「Photoshopでレタッチと言う名の整形で女性を美しく魅せるテクニック」というのがありますが、今回はハイパスとぼかし（ガウス）を使った肌を美しくする方法について、紹介していきます。 今回はこちらのサイトから、この写真の方を使用させて頂きました。 まず、元になる画像レイヤーを2枚複製しましょう。 続いて「ぼかし」と名前をつけた2枚目のレイヤーを、「フィルター」→「ぼかし（ガウス）」で、だいたい 3～5pixelで設定します。 続いて「ハイパス」と名前をつけた3枚目のレイヤーを、「フィルター」→「ハイパス」で、ぼ

バンドやってる以上は、活動内容や自分たちの音楽を広く沢山の人に知ってもらいたいですよね、いわゆる広報活動にも力を入れたいですよね。 今の時代はインターネットを活用すれば、お金を払わずとも効果的な広報活動が行えます！その代表的なツールがオリジナルホームページとSNSと言えるでしょう。 今回は、その中でもバンドのオリジナルホームページの作成方法に焦点を絞って、バンドホームページを作りたい！バンドホームページが必要だと思っている！という方に、素人の人でもこの記事を読めばホームページが持てるというところまで説明したいと思います。 バンドホームページの作り方 バンドのオリジナルホームページの作り方にはいくつかの方法があります。 ホームページ作成サービスを利用する Fc2など無料ブログサービスを利用する WordPressを利用する 選択方法としては、どこまで自分達のこだわり・世界観をホームページデザ

そこで、今回はPhotoshopでペン入れ・線画に使えるブラシの設定方法を紹介してみたいと思います。 また、今回作成したブラシ素材を置いておきますので、自由にダウンロードして使ってみて下さい。 （Photoshop CC で確認済みですが、他バージョンで再現できるかは不明です） ブラシ素材をダウンロード ペン入れ・線画に使えるブラシの設定方法 Photoshopの初期設定のブラシだと、終わりと始まりがシュッっと抜ける様にはなっていませんよね。 「なんでなん……？」と挫折する前に、ブラシのプリセットを弄ってみましょう。 プリセットと聞いて不安に思った方へ。大丈夫です、そんなに難しい事はしませんから。 まずはブラシ先端のシェイプで、硬さを「100％」、間隔を「1％」に設定しましょう。 続いて、左メニューからシェイプにチェックを入れて、コントロールを「筆圧」にします。 これで準備はOKです。 試

病院のホームページの作り方 どうもこんにちは、チーフデザイナーの塩谷朋広です。 各業種ごとでホームページの作成方法が異なることから、それぞれのホームページの正しいデザインについてまとめているこの連載、本日は病院（クリニック）のホームページ作成の際に気をつけておきたいことです。 この記事は、病院・クリニックを新規開業しこれからホームページを作りたい方、病院ホームページをリニューアルしたい方、そして病院ホームページ制作を依頼されたデザイナーの方に向けて書きます。 そもそも病院のホームページの必要性とは？ 病院やクリニックを開業されている方の中には、ホームページの必要性がわからないという方もいらっしゃると思います。 それなりの金額を支払ってホームページを作成するわけですので、やはりメリット・デメリットについてしっかり把握しておきたいところです。 そこで病院ホームページの持つ役割について説明します

皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイン動かしてみてください。 サンプルへ 一応コードはこちらから確認頂けます。 <div class="adjust-box

ソシャゲ風のカード枠を簡単に作成する方法 どうも、ぺとらです。 今回は、Photoshopでソーシャルゲーム（略してソシャゲ）でのカード等では欠かせない、枠・フレームの素材メイキング講座をやっていきたいと思います。 コツとセンス次第で、凝った装飾が出来たりしますが、それほど難しくない方法から説明していく予定ですので、是非チャレンジしてみて下さいね。 下地カード枠を作る 今回は、スマホ版で綺麗に表示される事を想定して、横640pxと縦800pxで作成したいと思います。こちらは案件によりけりだと思いますので、決してこのサイズで！ と言う事はありません。 まずは、キャンバスのサイズに合わせて長方形のシェイプを作成し、レイヤースタイルの「境界線」を使って、カード枠を作成します。 境界線のスタイルは上図の通りです。 今回は25pxの「内側」の境界線を作成しました。 続いて、下地のシェイプの「塗り」を

ホームページの作成方法（デザイン部分）を紹介している当シリーズ、前回は「和風ホームページ作成の際に利用したいフォントや素材まとめ」を紹介させていただきました。 今回は、「動く」というキーワードに注目して、アニメーション動画ホームページの作り方をご紹介していきます。 皆様は動くホームページ、アニメーションするホームページを依頼されるタイミングはありませんか？ そんな時に役立つ動くホームページの作成方法やメリットについてご紹介いたします。 動くホームページとは？ 当記事の中では、動くホームページとは画像がスクロールに応じて動いたり、文字がアニメーションしたり、ボタンがアニメーションしたり、動画コンテンツをデザインに上手く取り込んでいるホームページデザインのことを指すことにします。 動くホームページや動画を取り入れたホームページを作成するメリットとしては、何よりもインパクトやアイキャッチにありま

2013年創業のリースエンタープライズは、大阪・南森町、北浜が拠点のホームページ制作会社です。 外国語や多言語化のホームページ制作やSEO対策を得意とし制作後のサポートやカスタマイズも対応。 大阪でホームページ制作会社をお探しならリースエンタープライズへご相談ください。 LP、オウンドメディア制作などのWEB制作会社としてや、 ロゴ・パンフレットなどの各種デザイン制作、SNS運用など幅広いジャンルに対応します。 少数精鋭のプロ集団としてお客様のニーズを形にし成果に並走するホームページ制作を目指します。

IE8・9の対応が必要なくなってきた昨今、遂に本格的にCSS3をクライアントワークでも導入していける環境になりましたね！ jQueryやJavascriptで実装していた様々なアニメーションも、CSS3だけで実現できる程、CSS3の可能性は広がっています。 かくいう私もCSS3にハマっていて、クライアントワークをこなす中でCSS3に関する知識を蓄えてまいりました。そこで、本項では、超便利CSS3を使用したテクニックをご紹介していきたいと思います。 コピー＆ペーストで自由にご使用して頂けるように記述することを目指しました。 是非「これは便利だ！」と感じたら当記事のブックマーク・はてブ登録・ツイッター拡散をお願い致します！！ 必ず知っておくべき基本CSS3テクニックbox-sizingでwidthやborderやpaddingの計算を 簡単にしよう CSS3の中でも私が最も愛しているのがbox