はてなブックマーク

■「Skin by SparkleStock.atn」をインストールする場合アクションパネルの右上のメニューから「アクションの読み込み」を選択する。 ダウンロードしたアクションファイル（.atn）を選択すれば完了です。 ■「Skin by SparkleStock.zxp」をインストールする場合ファイル（.zxp）をダブルクリックすると「Adobe Extension Manager」が起動します。 ライセンスを承諾し、Photoshopを再起動します。アクションパネルの右上のメニューから「Skin by SparkleStock」を選択します。 準備完了です！ 適当な画像を用意しました。 1.アクションパネルの「Skin Airbrushing」選択。 2.再生。 メッセージが出ますブラシとレイヤーの不透明で調整してくだい、とのメッセージがでますので、「停止」をクリックしてメッセージを閉

スマホデザインのフォントサイズの基準は？目安となる国内サイトを大調査！ はじめまして。モロゾフのデカプリン大好き。うえだです。 スマホサイト、デザイン時 フォントまわりで悩んだ経験ありませんか？ ネット検索しても、情報がパッ見つからない…他社見ながら作ってみるものの、思ったよりサイズが大きかったり小さかったり… 基準のフォントサイズって無いだろうか？ と、言うわけで調査しました。 フォントサイズの調査概要国内のニュース・記事系サイト「タイトル・本文・行間」の3か所のサイズ調査しました。数値は同じ単位になるように直したものなので、大まかな数字になります。

Chromeの拡張機能ってたくさんあって、結局どれを入れたらいいんだろうと悩んでいる人も多いのではないでしょうか？特にデザイナーという職種は時間との戦いで、1分1秒でも無駄にできないですよね。そこで今回はデザイナーが入れておくと作業を効率化してくれる拡張機能を用途別に紹介していきます! ①あのサイトの色の数値が知りたい!そんな方にはColorZillaがおすすめです。サイト内の気になる色をサクッと取得できる拡張機能です。Photoshopのスポイトツールのような感覚で色を採取できます。 ②あのサイトのこの部分のスクショが撮りたい!そんな方にはFireShotがおすすめです。FireShotを使えばすばやく簡単にスクリーンショットが撮れます。また保存形式もJPGだけでなくPNGやPDFでの保存も可能です。ちょっとしたデザインの参考にしたい時におすすめです。 ③あのサイトで使われているフォント

「Photoshopで滑らかに動くGIFアニメを作りたいけど、画像を大量に作らないといけなくなり、めんどくさいそう！」と思ったことはありませんか？ 今回はアニメーションの開始点と終了点を指定するだけで、中間のフレームを自動で生成し、簡単に滑らかなアニメーションが作れる機能「トゥイーン機能」をご紹介します。 今回はこのGIFアニメの作り方をご紹介します。 下準備 まず、背景画像と動かしたい画像の2つを用意します。動かしたい画像は透過または切り抜きをしておきましょう。 背景画像の上に動かしたい画像を別のレイヤーにして配置しておきましょう。 タイムラインウインドウに配置する 上記メニューのウインドウから[タイムライン]を表示させ、[フレームアニメーションを作成]をクリックします。 これで自動的に1コマができます。 最初は秒数が0秒になっているので秒数を変更しておきましょう。ここでは0.1秒に変更

http://bashalog.c-brains.jp/category/series/php/ コチラのサイトでは、全10回の説明でPHPの基礎を学ぶことが出来ます。 説明がわかりやすく、補足の説明へのリンクも豊富ですので、まずはこのサイトから始めるのがいいかもしれません。 僕はこのサイトのおかげで、PHPに馴染むことが出来ました。 テキストですので、自分のペースで読みながら勉強を進めることが出来ます。 分からないところを何度も読み返して、理解を深めて行きましょう。 http://paiza.jp/ こちらのサイトの「動画学習」というページにいくと、PHPの勉強に役立つたくさんのコンテンツが用意されています。 このサイトの特徴は、 動画を見ながら新しい関数について学ぶ ↓ それを見ながら同じコードを書いてみる ↓ 問題を解きながら本当に分かっているかの確認、さらに理解を深めるために知識を

会社ホームページに使える英語表現！間違えると恥ずかしい32選 WEBサイトにおいて、構成や内容における「訴求力」やそれを表現する「デザイン力」というのはもっとも大切な部分です。そのデザインに関係してくるポイントとして、「英語表現」というものがあります。これは必須項目ではないにしろ、デザインをする上で重要なポイントになります。 たとえば、サイトをおしゃれに見せたい、サイトの重厚感を増したい、サイトに雰囲気を持たせたい、サイトのバランスをとるため等、さまざまな意図により使用されると思います。その内容を読む人は少ないかもしれませんが、間違った表現をしていては恥ずかしいですし、サイトの雰囲気を崩してしまう可能性もあります。 そこで、文法的に正しい簡潔で適切な表現をリストアップしてみましたので、デザイナーさん(及びディレクター)のみなさんは、ぜひ参考にしてみてください！ WEBサイトといってもその種

【photoshop】新人WEBデザイナーにオススメ！作業がはかどるphotoshop拡張機能7選！ こんにちは。四条河原町の川沿いの桜を見て「今年こそは盛大にお花見がしたいなぁ。」と思っている、デザイナーの上坂です。 仕事としてデザインをするようになってから、意識しなくてはならなくなったのが作業の効率化です。私もデザイナーになりたての頃は作業が遅いのが悩みでした。 でも、時間がなかったからとクオリティーの低いものを出したくないと思うのがデザイナーとしての本心ですよね。 そこで、今回はエムハンドが新人デザイナーにおすすめしている、Photoshopの作業を効率的にしてくれる拡張機能(プラグインもしくはスクリプト)をインストール方法と一緒に紹介します。 1.GuideGuide用途に応じたガイドラインの作成が簡単にできる定番のプラグイン。 分かりやすい操作パネルでとても重宝しています。個人的

Webデザインで「ふきだし」使ってますか？使用例ときれいに見せる4つのポイント こんにちは、デザイナーの米田です。 最近iPhoneの指紋認証の成功率が5割程度まで落ちてきました。乾燥が原因なのか、私の指紋が進化し続けているのか。 さて、漫画には欠かせない存在『ふきだし』 Webデザインでも至る所で見かけますよね。 今回は、Webデザインにおけるふきだしの使用例や、ふきだしを使うときに気をつけている個人的ポイントをご紹介します。普段何気なくふきだしを使っているデザイナーの皆さんの復習になれば幸いです。 http://www.utsu-s.jp/ このサイトではメインイメージ内のキャッチコピーを補う役割でふきだしが使われています。ユーザー目線風の発言をふきだしに入れることによって、このサイトでどんな情報を得られるかを効果的に伝えています。 また、バナーにも随所にふきだしが使われています。 h

もう悩まない！ WordPressのタイトルと本文の文字数制限を使いこなす TOPページで新着記事を読み込む時。 ブログの記事一覧ページなどで本文を〇文字だけ表示させる時。 みなさんどのように実装されていますか？ 「the_excerpt()」を使う手もあるんですが、 こちらはこちらで色々と自動でタグが入ってしまったり、functions.phpに細々書く必要があったりとメンドクサイ個人的に使いにくいのであまり使いません。 今回は、the_title()とthe_contnet()の文字数制限について、細かめにご説明したいと思います。 基本的にタイトルにはテキストしか入らないので、そんなに難しくありません。 ご紹介するコードも3つだけ。 ① 単純に20文字で制限する<?php echo mb_substr($post->post_title, 0, 20); ?>単純ですね。20文字まで表

こんにちは、デザイナーの内藤です。 みなさんは、デザインをする上で余白とどのように付き合っていますか？ 余白はデザインにメリハリとルール、そしてリズムを与えます。 この余白に対して、「なんとなく」「感覚で」というナァナァな状態で付き合っていると……良かれと思って設定した余白が、なんだか違和感のあるスペースになってしまったり、デザインの輪郭がぼやけて雑な印象を与えてしまったり、最悪なケースになると意図せぬ情報の解釈をされてしまいます。 今回は、普段デザインする際に気を付けている「雑に見えない余白のポイント」をご紹介します。 余白は情報に区切りを与える役割を持っています。 上の図では、情報の階層は「グレー背景のハコ　> 白背景のハコ*2 > 画像＋テキスト」となっています。 この場合、余白の大きさは下記の順番で設定すると、情報の区切りが明確になります。 ①グレー背景のハコ　⇔ 白背景のハコ ②

コンテンツ更新に強い！CSS擬似要素:beforeと:afterの使い方 :beforeがあればなんとかできる。 エンジニアのF.Kです。 CSSの勉強をはじめたばかり。そういう人はちょっと敬遠しがちな擬似ほにゃらら。 しかし使い方を覚えてしまうと、擬似要素や擬似クラスは便利なものです。 今回は便利な擬似ほにゃららの中から擬似要素、特に:before擬似要素と:after擬似要素の使い方についてご紹介しようと思います。 CSSは、HTMLなどでマークアップされた要素を指定し、その要素全体に対してスタイルを設定していく言語です。 例えば下記の例だと文字色を赤にする指定が<p>要素全体にかかり、「株式会社エムハンド」という文字すべてが赤くなります。 もし「エムハンド」という文字だけ赤くしたいと思ったら、<span>などで「エムハンド」を囲う必要が出てきます。 このように「マークアップされた要素

【Photoshop】初心者からの脱却!! スライスの効率を上げる４つの方法 新人コーダーにとって、スライス作業の効率化は一つの大きなテーマではないでしょうか。 かく言う私もまだ入社して間もなく、様々な方法で作業を行い、試行錯誤の中で効率よく作業を進めていく方法を模索しています。今回は、その中でも簡単に導入できて、実際に作業の効率化を図ることが出来た方法をご紹介していきます。 imagesフォルダが作成されないようにする初期設定では、スライスした画像を『web用に保存』で書き出すと、imagesフォルダを作り、その中に画像が保存されます。わざわざ、imagesフォルダから画像を移動させて、imagesフォルダを削除という作業はもうやめましょう。 方法1.書き出したい画像をスライス後、 メニューバーのファイル→書き出し→Web用に保存（ショートカットctrl+alt+shift+s）をクリッ

WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」 デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラーその名の通りサイト

WordPressで押さえておきたい！get_posts,WP_Query,query_posts の違いと用例 例えばWordPressでこのようなことをしたい場合。 固定ページで記事のタイトルとカテゴリを出力したい表示されるページ数を変更して出力したい以下の、どれを使って出力するのが適切でしょうか。 get_postsWP_Queryquery_posts今回は、この3つの特徴と異なる点、用例を紹介します。 簡単にそれぞれの特徴をおさらいしましょう。 get_postsテンプレートタグカスタムループを生成する際に使用（メインループに影響与えない）・基本的な記述例 $args = array('post_type' => 'post'); $the_query = get_posts( $args ); foreach ( $the_query as $post ) : setup_po

分かりやすいグラフを作りたい！IllustratorとPhotoshopで作る円、棒グラフ 「Illustratorで作れるみたいだけど、イマイチ作り方が分からない！」って思いませんか？そんな方のために、分かりやすい円グラフ、棒グラフの作製、デザインのカスタマイズ方法をご紹介します。 まずは、Illustratorツールパネル内の「グラフアイコン」をクリックし、使いたいグラフを選択。開始点から対角線上にドラッグ、又は、画面をクリックするとグラフサイズを入力する画面が出るので、お好きな数値を入力し作成してください。 データを入力できる「グラフデータウィンドウ」が表示されるので入力していきます。 棒グラフ上の画像のようにデータを入力し、ボックス右上の「適応ボタン」又はEnterキーを押せば、棒グラフにデータが反映されます。 円グラフ円グラフはこのように表示されます。 作成後のグラフは文字との空

たったワンアクション！　大量のPSDファイルを一気にJPEG保存する方法！ 今回は、意外と知らなかったPhotoshopのドロップレット機能を使って、ドラッグ＆ドロップするだけで、複数のPSDデータを一気にJPEG保存する方法をご紹介します。この方法は、バッチ処理などと違い、Photoshopを開くことなくJPEG保存ができるので、バナーのデザイン提出や、大量のページを修正した後のJPEG保存の時にとっても便利です！

1行書くだけ！WordPressで検索ボックスを複数設置して投稿タイプごとに検索する方法 WordPressの構築時に少し苦戦しました。 というのも、インバウンドとヒルメシマエ、両方のサイドナビにそれぞれの検索ボックスを設置すべし！　という代表からのお達しがあったのです。 ご存知の通りWordPressの検索ボックスは「searchform.php」を読み込めば表示されるものが1つ準備されているのみ……。 検索結果ページについても、search-post.phpのようなテンプレートは残念ながら準備されていません。 これはちょっと厳しいんじゃないか、なんて思って調べてみたら、ありました。get_search_formにしっかりと。 いやぁ～知らんかったぁ～ <form role="search" method="get" action="<?php bloginfo('url'); ?>">

【Photoshop】思わずよだれが！ 料理写真をより美味しそうに見せる3つのポイント 飲食店のサイトにおいて、写真の印象はとても重要です。料理の写真が美味しそうか否かで、ユーザーへの訴求力は大きく変わってきます。 そこで今回は、料理写真の魅力をさらにアップさせるためのポイントと、Photoshopを使った簡単な補正方法をご紹介します。 “美味しそう！”を決定する「明るさ」「色」「温度」料理写真の補正で意識するポイントは 明るさ色温度です。明度、彩度をほどよく上げることで「新鮮さ」や「温かみ」などを表現することができます。 また、温かい料理は温かく、冷たい料理は冷たく見せるといった「温度感」も意識してみると、より食欲のそそられる写真になると思います。 暗い料理の写真は、食材の色がくすんでしまい、美味しそうに見えません。 レベル補正機能で明るさを調節たまごかけご飯です。写真が薄暗いせいで新鮮

STEP1とSTEP2の順で設定が終わっていれば、よくあるご質問（ポストタイプ名「faq」・タクソノミ―名「faq_cat」）の各ページURLは下記のようになってると思います。 記事一覧ページ …… http://example.com/faq/タクソノミー（カテゴリー）ページ …… http://example.com/blog/faq_cat/ターム名/記事ページ …… http://example.com/blog/faq/記事のタイトル/うわぁ……(^^; ってなると思いますが、大丈夫、大丈夫ですから！ さて、まず、スタッフブログだけに入れたい/blog/がここにも入ってしまってますね。これを取りましょう。 そして、タクソノミー（カテゴリー）ページの/faq_cat/を取り、代わりに/faq/を入れます。 最後に、記事ページの/faq/の後に/ターム名/を入れれば完成です。 カスタ

文字だけだと分かりにくいので簡単なデザインを5秒で用意しました。ダサいとか言わない。 コルク模様の背景に矢印が半透明で乗っかってます。 まぁまず間違いなく最初は、 「背景はCSSでリピートさせて、その上に矢印を透過pngで配置すればいいやー。」 ってなります。…なりますよね？ コーディングしてブラウザでチェックしてみました。 アレ？なんか違う……。 デザインでは半透明の矢印ごしにうっすらとコルク模様が見えていたのに、一色で塗りつぶされてしまいました。 ……何故！？ 結論を先に言ってしまうと、レイヤーの描画モードが「乗算」や「オーバーレイ」など、「通常」以外になっていることが原因です。 これらの描画モードはその下のレイヤーに依存して見た目が変わるので、透過pngを書き出すために背景を不可視にした時点でコルク模様が無くなってしまっている訳です。 ちょっとしたアイコンくらいならopacityで誤

パス抜きより劇的にキレイ！Photoshopで髪の毛を切り抜くテクニック！ Photoshopで写真を切り抜くとき、いつも悩みがちな髪の毛の部分。ペンツールだけで切り抜くと、不自然な仕上がりになってしまいます。 そんなときは、「チャンネル」をうまく活用しましょう！

Chromeの拡張機能で、簡単にWebサイトをキャプチャしてシンプルに管理・共有できる「Clipular(無料版)」を使用して便利に感じたのでお伝えします。 Clipularはこんなときに便利 デザインするときに 「いつか見たあのサイトのデザインやテクニックを参考にしたい」けれど、 「参考とするサイトを再び探すときに時間や手間がかかったりする」なんてことありませんか？ 「ブックマーク登録」などに登録しておくことも手ですが、たくさん登録している場合だと、サイト名とデザインが一致せず、なかなか探し出せないこともありますよね。 Clipularは簡単にキャプチャ画像とURLを同時に登録しておくことができるので、欲しい情報をさっと取り出すことのできる優れものです。「サムネイル付きのブックマーク」または、よくある「WEBデザインリンク集」の個人版のようなイメージを想像してもらうとわかりやすいと思いま

今回は、「もしかして意外と知られていない？」と思った Photoshopの整列機能についてご紹介します。 Photoshopの整列機能について Photoshopの整列機能は、より端にあるオブジェクトを基準に整列されます。 例えば、図①でAとBを選択し「右揃え」「左揃え」「中央揃え」すると、 右揃え：Bの右端に整列される 左揃え：Aの左端に整列される 中央揃え：A+Bの幅の中央に整列される となります。 しかし、たまに特定のオブジェクトを基準に整列したい時、ありませんか？ Illustratorの機能「キーオブジェクトで整列 Illustratorでは「キーオブジェクトを基準に整列」することができます。 図②のように、各オブジェクトの座標位置ではなく、 キーオブジェクトの座標を基準として整列することができます。 （※Illustratorでの詳しい整列方法はここでは省きます。） キーオブジ