【PhotoshopCC】「ディテールを保持」機能で劣化の少ない画像拡大方法

こんにちは。
ぬこ飼いデザイナーの佐竹です。

さて今回は、きれいに画像を拡大する方法をご紹介します。
今までは画像を拡大すると、ノイズが目立ち、シャープをかけてもギザギザが気になりました。
ccから追加された新しい機能「ディテールを保持」を使うと、画像の劣化が少なくすむので、その後のレタッチの手間を省けます♪

それでは、さっそく手順です。

「画像解像度」を選択

「イメージ」メニューの「画像解像度」を選択します。

解像度を指定

「画像解像度」ダイヤログが表示されるので、解像度を指定。(例では400px×266px)
「再サンプル」にチェックを入れて「ディテールを保持」を選択します。
次に、その下の「ノイズの軽減」の数値をプレビューで確認しながら設定します。

画像の劣化が抑えられました。
Photoshopには他にも「ニアレストネイパー」という拡大方法があります。
こちらも後日ご紹介したいと思います。

【SASS】初心者向け!SASSを使ってみよう! 《便利機能8つ!!》

こんにちは。

ぬこ飼いデザイナー佐竹です。
前回(【SASS】初心者向け!SASSを使ってみよう!《基本情報編》)から、SASSについてご紹介しています。
今回は、導入にあたって、絶対に導入したくなる!SASSの便利な機能についてまとめてみようと思います。
ブログを書きながら私も勉強していきたいと思っています!

記述の簡略化

入れ子(ネスト)が使えるので、長い階層記述を省くことが可能になります。
セレクタを何度も書く必要がなくなり、効率的です。
一度使ったセレクタは@extendで使いまわせるので、非常に合理的です。

変数・関数を使える

変数を定義できます。
初めに各種設定を定義しておけば、変更も再利用も効率よく行えます。
関数については、リファレンスが必要になりますが、様々な処理が行えます。

四則演算が使える

レイアウトの際に、演算処理ができるようになるので、「均等に3分割、4分割」などが可能になります。

スタイルを継承することができる

既存のクラスを引き継いだ状態で、新しくスタイルを書き加えることができます。

コードの再利用

スタイルをまとめて、モジュールやテンプレートのように定義し、読み込んで使うことが可能です。
値を可変にした定型文のような感じで使用する場合@mixinを使用します。値の一部を変更して使いまわすことが可能です。
値が固定の場合は@extendを使用します。

条件分岐などプログラム的な処理が可能

ifやfor文を使えるので、様々な条件分岐での繰り返し処理を行えます。

CSSファイルを圧縮できる

大規模サイトで複数のcssを管理しているような場合も、RubyやKoalaで圧縮することで1つのcssファイルとして書き出すことが可能です。

フレームワークが使える

Compassなど、様々なフレームワークが開発されています。
機能を拡張することが出来、さらに便利になります。

【SASS】初心者向け!SASSを使ってみよう! 《基本情報編》

こんにちは。

ぬこ飼いデザイナー佐竹です。
今回からしばらく、SASSについて書いていきたいと思います。
コーディングの効率化は永遠の課題。しかし、ソースのクオリティが落ちてしまうのは悲しいですよね。

コーディングの効率化と言って今真っ先に頭に浮かぶのがSASSです!
ブログを書きながら勉強していきたいと思っています!

では、さっそく。
まずはSASSの基本情報からおさらいしていきたいと思います。

SASSって何?

Sassとは、「Syntactically Awesome StyleSheet」の略です。
直訳すると構文的にかっちょいいスタイルシート…みたいな感じです。

記法の違い

SASSには「SCSS記法」と「SASS記法」があります。
今一般的にはCSSと互換性のある「SCSS記法」を使うことが一般的です。
SASSの公式サイトでもSCSS記法がサンプルとして使用されています。

インストールについて

SASSを使うためには「Ruby」をインストールする必要があります。
次回は、この「Ruby」のインストール手順をご紹介します!
ちなみに、Macをお使いの方は、すでにインストールされていますのでこの手順は飛ばしてOKです♪

動作環境が整った後はGUIツールである「Koala」をインストールします。
こちらも後程ご紹介しますので、ぜひご覧ください!

【Photoshop】便利すぎる「調整レイヤ―」の機能一覧!!

こんにちは。

ぬこ飼いデザイナー佐竹です。
梅雨ですね~。洗濯物が乾きませんね~。。

さて、前回「調整レイヤ―を使って特定のレイヤーを簡単にモノクロ変換する方法」をご紹介しましたが、この便利すぎる「調整レイヤー」の種類をまとめてみたいと思います。
元の画像をキープした状態で調整できる機能なので、もう別の方法は使えないくらい便利ですよね!

では、調整レイヤーの種類をご紹介します。。

明るさ・コントラスト

画像の明るさとコントラストをそれぞれのスライダーで調整できます。

レベル補正

画像のピクセル分布をヒストグラムで表示し、階調を総合的に調整できます。

トーンカーブ

レベル、明るさ、コントラストなどの調整点を曲線でコントロールし、階調や色域を総合的に調整できます。

露光量

画像の明るさをRGB値のガンマ(光の強さ)で調整できます。

自然な彩度

彩度の増減によるクリッピング(階調が失われる現象)を抑え、自然な彩度に調整できます。

色相・彩度

画像の色相、彩度、明度をスライダーで調整できます。

カラーバランス

RGBカラーの色情報を個別に調整して、色調を総合的に補正できます。

白黒

色の系統別パラメーターで、カラー画像をグレースケールへ変換できます。

【Photoshop】調整レイヤ―を使って特定のレイヤーを簡単にモノクロ変換する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
梅雨ですね~。ヘアスタイルが決まらないですよね~。

さて、今回は特定のレイヤーだけ簡単にモノクロに変換する方法をご紹介します。
背景をモノクロにして、文字は色を付けて目立たせたい場合などに使えるんです。

しかもリッチなグレースケール画像を作成することが出来る!そして何度も修正が可能で元に戻すことも出来る!とても便利な機能ですよ!!

では、早速手順です。

新規調整レイヤ―を選択する

[レイヤー]→[新規調整レイヤー]→[白黒]を選択します。

「白黒」という調整レイヤーがレイヤーパネルに表示されて、下にあるレイヤーすべてがモノクロに変換されました。
レイヤーパネルを見るとわかりますが、元のレイヤーは変更されておらず、調整レイヤーを削除すれば元に戻ります
調整レイヤーをダブルクリックすると、再調整が可能です。

白黒調整レイヤーより上にレイヤーを作成することで、そのレイヤーの文字や画像に色を付けるこのが可能です。

いかがだったでしょうか?
簡単すぎてびっくりしてしまいますよね。
元の画像をキープした状態で調整できる機能は、とても便利ですよね。
これでモノクロ変換も自由自在ですね!!

【Photoshop cc】ガイドをサクッとグリッドに変える方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
洋服や寝具の整理など、梅雨入りの準備はしましたか~?

さて、先日「Photoshopでガイド線をガッチリ正確に引く方法」をご紹介しましたが、この方法を応用して、グリッド線を簡単に引く方法をご紹介します。

グリッドレイアウトをしたいけれど、簡単に思い通りのグリッドを引きたい!という時にとても便利ですよ~♪

では、早速手順です。

新規ガイドレイアウトを作成

「表示」メニューから「新規ガイドレイアウトを作成」を選択します。

ダイアログボックスに数値を入力

(1) カスタムを選択します。
(2) 列にチェックを入れて幅や間隔を設定します。
(3) 行にチェックをいれて、列と同じ幅・間隔を設定します。
(4) マージンは必要があれば設定してください。


いかがだったでしょうか?
簡単にグリッドの設定が出来ました。
これでかっこいいグリッドレイアウトが作れそうですね!!

Photoshopでブラウザから簡単に色を取得する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
今回は、ブラウザで開いているページから簡単に色を取得する方法をご紹介します。

スクリーンキャプチャをPhotoshopに貼り付けて、スポイトで色を取っているあなたに朗報です♪

※この方法は、マルチディスプレイを使用している場合は「Photoshopを開いているのと同じディスプレイ上」にあるブラウザからでないと、実行できませんので、ご注意ください!!

【手順】

(1) Photoshopと、取得したい対象のブラウザやアプリを同じモニター上に並べます。

(2) Photoshopのカラーピッカーを開きます。

(3) Photoshopのドキュメント上にカーソルを合わせて、マウスポイントをスポイトに変えます。

(4) ドキュメント上でクリックしたまま、対象の取得したい色の部分までスポイトをドラッグします。
一番食べたいドーナツの色を選択~!

(5) 取得したい色の上でスポイトを放すと、その部分の色が取得されます。

いかがだったでしょうか?
びっくりするくらい簡単に色を取得できましたよね。
この機能は知っているとすんごく便利ですね!!

無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【基本設定編②】

こんにちは。
暑い日も増えてきて、お出掛けした陽気になってきましたね♪

さて、今回は
1.「acmailer」の簡単な設置方法【設置編】
2.「acmailer」の簡単な設定方法【基本設定編①】
に続いて、「acmailer」を設置・設定する方法【基本設定編②】です♪

これで初期設定は終わりです!
メルマガを送付する準備が整いますよ~!!

①送信サーバー設定

【送信モード】

ノーマル

通常配信を行います。
ノーマルで大規模なメール配信を行うと、メール配信が完了するまではブラウザを閉じたり、他ページへ移動する事ができません。

分割送信

分割配信を行います。
たとえば「分割送信件数10件」 「分割待ち時間10秒」と設定した場合
10件の送信ごとに10秒間、配信をストップします。
携帯電話のアドレス等へは一度に大量のメールを送信するとスパムと扱われる事もある為、ある程度時間を分割して送信する事でこれを対策する事ができます。

バックグラウンド送信

バックグランド送信を行うと、送信の命令を受け取った後は、バックグラウンドで配信を行います。

【送信サーバーの選択:ローカルサーバー】

sendmailパス

サーバーのメールプログラム(MTA)パスを入力します。
「サーバー上のパスと一致しました。」となっていれば送信できる状態となります
「サーバー上のパスと一致しません。」となっている場合MTAがないか送信パスが間違っている可能性があります。
詳しい技術情報はサーバーにより異なります。

【送信サーバーの選択:外部サーバー】

認証方法

サーバーが対応している認証方式を設定します。
テスト送信ではメールアドレスを入力する事で、そのメールアドレスに対してメールの送信を行う事で設定のテストを行えます。

ホスト名

外部送信サーバーのホスト名とポート番号を記述します。

ユーザー名

認証が必要な場合ユーザ名を入力してください。

パスワード

パスワード 認証が必要な場合パスワードを入力してください。

空メール設定

空メール設定とは、用意したメールアドレスへ空メール(タイトル、本文がないメール)を送信するだけで登録・解除が可能な機能です。
ただし、実際にこの項目を変更しても空メール設定はされません。
空メールの利用には、サーバー側の対応が必要となります。

・メールアドレス作成権限
・メールアドレスにパイプ処理の出来る権限(シェル、SSH操作)
が必要となります。

予約配信設定

あらかじめメールを作成しておき、指定した時間にメールを配信します。
有効にする事でメール配信カテゴリーの
「テキストメール配信」「HTMLメール配信」「デコメール配信」にて、「配信日時」という項目が追加されます。

予約中のメールの詳細は「配信履歴」のページより確認でき、ここから予約中のメールの内容編集やキャンセルを行う事もできます。複数のメールを予約する事も可能です。

不着メール管理

不着メール設定にて不着メール管理の「使用する」にチェックを入れているとき、有効になります。
メール配信後、不着メール管理にて不着データを更新する事により不着メールがカウントされます。この作業はログイン時に自動的に行われますが、メール配信後、不着メール件数がすぐに知りたい場合などに便利な機能です。

①不着データを更新
メール配信後、最新の配信履歴10件より不着だったメールの件数を計算します。
不着データを更新すると、不着だった件数が配信履歴の不着件数に即座に反映されます。

不着メール設定

不着メールの一覧の表示やカウントが可能です。
acmailerがメールを送信する際のエラーメールの送信先を明示的に指定しエラーメールをacmailer側で把握させる機能となる為、acmailerの設定を有効にした後にサーバ側のパイプ処理(qmail等、プログラムへデータを渡す処理)の設定が必要です。
不着メール用メールアドレスはacmailerを設置したサーバーへMXレコードが向いているドメインの物を使います。メールアドレスの生成方法は、サーバー管理者にお問い合わせください。

トップページメモ

トップページに表示されている文字は自由に編集する事ができます。

携帯ドメイン設定

登録されているメールアドレスの中で「携帯のメールアドレス」であると判断するドメインを登録できます。
デコメール配信の為に送信メールを絞り込むなどする際に便利です。
@より右の部分を記述します。

設定エクスポート / 設定インポート

acmailerの各種設定内容やメールアドレスの一覧などをエクスポート(バックアップ)、インポート(再設定)することができます。(新しいacmailerへのデータ移行時など)

ライセンス登録

発行されたライセンスキーの登録を行います。
※acmailerDB版/CGIライセンス 申込み時に設定を行ってください。

サブアカウント設定

通常のログインで使用するメインアカウントとは別の「サブアカウント」を作成する方法です。
「各種設定」>「サブアカウント設定」>「新規作成」ボタンより、追加を行うことができます。
サブアカウントでのメール送信の実行について、承認設定を行うことができます。
・「承認あり」にチェックを入れた場合・・・メインアカウントの承認を得ないと、サブアカウントでのメール送信を行えないようになります。
・『承認あり』『承認不要』両方にチェックが入っていない場合・・・メール送信の権限がない状態(表示のみ)となります。
各種権限設定・・・各画面へのアクセス、および機能の実行について、利用制限を行うことができます。チェックを入れている項目のみ、サブアカウントでの利用が可能となります。

メールアドレス一覧

「検索」で一覧を絞りこんだり、配信先のメールアドレス情報の編集等が行えます。
配信する/しないの設定等も行う事ができます。

メールアドレス登録

1件ずつ登録・一括登録が行えます。
登録の際は【各種設定 > 自由項目設定】の項目設定で「必須」にチェックが入っている項目は、登録の際に指定をしなければエラーになります。

【メールアドレス一括登録】

・メールアドレス一覧をcsvファイルで準備しておきます。
①「ファイルを選択」準備したcsvファイルを選択。使用している文字コードを選択します。
正しい文字コードを選択していないと、文字化けなどが発生します。
②「登録データ詳細表示」にチェックを入れると登録データを一覧で表示させてから登録となります。
③「登録」ボタンクリックで一括登録されます。

【メールアドレス一括削除】
・削除したいメールアドレス一覧をcsvファイルで準備しておきます。
①「ファイルを選択」で準備したcsvファイルを選択し「一括削除」をクリックします。
②確認画面が表示されます。「削除される入力内容」と「エラーにより削除されない入力内容」の一覧が表示されるので、確認し削除します。

【メールアドレス個別削除】
①「テキスト貼付」欄に、削除したいメールアドレスを入力します。
1行ずつ複数のアドレスを入力すると一括削除も行えます。
登録されているアドレスと一致したもののみ、削除されます。
アドレスが存在しない場合はエラーになります。

無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【基本設定編①】

今回は、前回の「acmailer」の簡単な設置方法【設置編】に続いて、「acmailer」を設置・設定する方法【基本設定編①】をです♪
長いので2回に分けてご紹介します。
マニュアル通りに設定すれば、あっという間に終わりますよ~!

メール設定

配信したメールマガジンの「差出人」「送信元メールアドレス」として表示される項目です。

自由項目設定

メールアドレス管理の「自由項目」について設定する事ができます。
必須にチェックを入れると、メールアドレス登録時にこの項目が未入力であった場合はエラーになります。

システム設定

acmailerの動作に対する設定を行います。
①・②ログインID・PW
管理画面へログインするためのID、PWを変更します。

③タイトル
acmailerの管理画面のタイトルを変更します。

④カウンター表示
acmailerのカウンター表示のON/OFF設定。

⑤バックナンバー
バックナンバーの公開について ON / OFF の設定。
また公開設定(ON)とした場合に1ページに表示する件数を設定。

⑥メルマガ登録・削除メール設定
メルマガの登録時、削除時にユーザーへ自動返信メールを送信するかどうかの設定。
また、管理者にメールを送るかどうかも設定する事が出来ます。

⑦ダブルオプトイン
ダブルオプトイン機能を使用するかどうかを設定できます。
※ダブルオプトインとは、メールマガジン登録の際に、一度ユーザーに確認メールを送付する事でいたずらや間違いによる登録を防ぐ機能です。登録はユーザーへの確認メールの手続きに従う事で正式に登録されます。

⑧削除時の動作
ユーザーがメールマガジンへの登録を削除(退会)する際に
acmailerでの動作の設定です。
「削除」では退会したユーザーの情報を削除します。
「配信停止」ではユーザーの情報は削除されず、配信停止となります。

⑨再登録拒否設定
チェックを入れると、メルマガの登録を一度解除したユーザのメールアドレスを
自動で登録します。こちらに登録されたユーザが再び登録を行った場合、
『一度退会されているため、登録を受け付けることができません。』という内容の
メールが自動で返信され、登録を行うことが出来なくなります。
※「拒否時間」では再登録を行えなくする期間を1時間単位で設定可能です。
※初回登録限定の特典を用意している場合などに便利です。

⑩重複データの登録
チェックを入れるとメールアドレス等が同じデータでも登録する事が出来るようになります。デフォルトでは重複データの登録は出来ません。

⑪機種依存文字チェック
機種依存文字をチェックすることによりメールの文字化けを防ぐことができます。
このチェックをはずした場合はメール本文・履歴一覧にて文字化けが発生する可能性が起こります。

⑫CGI設置URL
CGIを設置しているURLです。
インストール時にプログラムが自動的に取得しますので、変更がない限りは特に設定する必要はありません。

⑬CGI設置パス
CGIを設置しているパスです。
インストール時にプログラムが自動的に取得しますので、変更がない限りは特に設定する必要はありません。

⑭アンインストール補助
アンインストールを行います。

⑮システム情報
クリックすると、「sysinfo.txt」が自動でダウンロードされます。
acmailerのシステム情報(バージョンなど)を確認できます。

以上が設定編①です!
いかがだったでしょうか。
次回は「メールアドレス一括登録」など、設定編②をご紹介します!

無料メルマガ送付ソフト「acmailer(エーシーメーラー)」の簡単な設定方法【設置編】

今回は無料で簡単に複数のメールアドレス宛にメールマガジンを送付できる「acmailer」を設置・設定する方法を簡単にご紹介します♪

acmailerは、ケータイ、iPhoneなどにも対応していて、HTMLメールも送付できます。
そして、csvファイルでメールアドレスを簡単に一括登録することが可能です。
手軽にメルマガ配信を始めてみたい人にはおススメのソフトです。
※フリーライセンス(無料)版はリンク付の著作権表示をすることで使用可能です。

◆ダウンロード

まずは以下のサイトからファイルをダウンロードしてください。

http://www.acmailer.jp/download/index.html

※事前に、お使いのサーバがacmailerに対応しているかを確認しましょう!
インストーラーには「DB版」「CGI版」の2種類があります。
今回は「CGI版」でインストールしていきます!

◆インストーラーをアップロード

任意の名前(acmailerなど)でフォルダを作成して、ダウンロードしたインストーラーファイルを保存、サーバにアップロードします。

パーミッション(属性)は

 ・フォルダ・・・「777(またはプロバイダ推奨値)」
 ・インストーラー・・・「755(またはプロバイダ推奨値)」に設定します。

パーミッションの設定が間違っていると500サーバエラーになります。

◆インストール

インストーラーにアクセスし、説明に従って進めてインストールします。

◆インストール完了

インストールが完了すると、acmailerの管理画面が表示されます。

次回は引き続き【設定編】として設定方法をご紹介します!!

Photoshopでガイド線をガッチリ正確に引く方法

こんにちは。
GWですね。今週は2日稼働。自然と鼻歌が出てしまうような気分です♪

さて、今回はガイド描画の数値指定方法をご紹介します。
デザインカンプを作る際に、まず全体のサイズを決めるのですが、画像の自動書き出し機能を使用することを考えると1px単位で正確なガイド線をひきたいですよね。
でも、手動だと大抵すごく微妙な位置になってしまいます。


↑手動で引くと微妙な位置に。
1px、単位でガッチリ確実にガイドを引きたい!という私のような方は、ぜひご覧ください。

◆Photoshopでガイド線をガッチリ正確に引く方法

ガイドの単位を確認する

「表示」メニュー→「定規」を選択して定規を表示させ、x.yの交わる左上の部分で右クリックします。
webデザイン用であれば「pixel(ピクセル)」にチェックを入れます。

新規ガイドメニューを選択

「表示」メニューの「新規ガイド」を選択します。

ガイド設置場所をピクセル指定

縦方向→「垂直方向」横方向→「水平方向」を選択。位置は左上からの距離を入力します。

指定の位置にガイドが引かれました。気持ち良いですね!!

慣用色名の一覧をつくってみた②

こんにちは。
もう4月も終わりですね。
あっという間に1年の3分の1が終わってしまいました~。

さて、前々回「慣用色名の一覧をつくってみた①」という記事を書きましたが、第2段です!!
今回は緑系の色名をまとめてみようと思います。
若竹色、青竹色、老竹色など、自然の世界の色を表す色名は面白いですね。
それでは行きますよ~。

◆カーキー

 

「ちり、ほこりのような」という意味。ミリタリーカラー。

◆オリーブ

 

「黄の色相の暗い色調」を分類するための基本色名のひとつ。

◆クリームイエロー

 

乳製品のクリームの色。

◆ベージュ

 

フランス語で「未漂白」「未染色」「未加工」の毛織物の色名。

◆セピア

 

イカが墨を出す墨汁嚢(ぼくじゅうのう)を乾燥して粉末にした古代の絵の具の名前。

◆萌黄 もえぎ

 

春に芽吹く若葉のような色を表す伝統的な色名で「萌葱(もえぎ)」ともかく。

◆うぐいすいろ

 

鶯の羽毛のような色。

◆オリーブグリーン

 

オリーブのつく色名は、「イエロー」「ブラウン」「グリーン」「グレイ」など。

◆コバルトグリーン

 

18世紀の終わりにコバルトグリーンという色名が誕生。

◆若竹色

 

「若い竹」の色で成長した竹の「青竹色」、くすんだ緑色の「老竹色」とともに竹の色の3点セット。

◆青竹色

 

成長した青竹の幹のような青みの冴えた明るく濃い緑のこと

◆老竹色 おいたけいろ

 

年を経た意味の灰味をおびた老竹のような、ややくすんで灰色がかった緑色

◆エメラルドグリーン

 

エメラルドの宝石のような色。

◆青磁色 青磁色

 

中国の唐の時代に作られた磁器の色。

◆ビリジアン

 

「クロームグリーン」とともに緑を代表する絵の具の色名

JIS(日本工業規格)で定められている色名について

こんにちは。
急に暖かくなりましたね。
衣替えで洋服の整理・補正・洗濯・収納・入れ替えなどの作業をすることがとても好きなのですが、今年は思い切って断捨離をしてみようかなと考え中です♪

さて、前回「慣用色名」について少しまとめましたが、続きを書く前に「色名」の表示方法について簡単にまとめてみます。

JISの基本色名

JIS(日本工業規格)で定められている基本色名。
有彩色(赤・青・黄・緑などの色味のある色)10種類、無彩色(色味を感じない彩度がない色)3種類。

有彩色の基本色名(10種類)

◆赤

 

◆黄赤

 

◆黄

 

◆黄緑

 

◆緑

 

◆青緑

 

◆青

 

◆青紫

 

◆紫

 

◆赤紫

 

無彩色の基本色名(3種類)

◆白

 

◆黒

 

◆灰色

 

JISの系統色名

系統色名は、基本色名に明度や彩度、色相に関する装飾語をつけて色表示したものです。様々な色の違いを表示することができます。
例)「こい(明度・彩度に関する装飾語)」「赤みの(色相に関する装飾語)」+「赤(基本色名)」

JISの慣用色名

親しみやすく、イメージしやすい色名「固有色名」の中でも、比較的よく知られている色名。
JISの慣用色名は現在「269色」(和色名:147色、外来色名:122色)制定されています。
「系統色名」は無機質な表現で、雰囲気やイメージが伝わりにくいことがあります。慣用色名の方は、色名からイメージが伝わりやすくなっています。
例)「つよい緑(系統色名)」→「エメラルドグリーン(慣用色名)」、「暗い黄赤」→「煉瓦色」など

慣用色名の一覧をつくってみた①

こんにちは。

ぬこ飼いデザイナー佐竹です。
新学期もスタートして、毎日お弁当をせっせと作っているのですが、マンネリ化してきたので新しい簡単レシピを探しています♪

さて、今回からしばらく「慣用色名(かんようしきめい)」についてまとめていきたいと思います。
色のイメージ(RGB値)は大まかなイメージなので参考までにご覧ください。
個人的には芥子色は良い色だな~としみじみ眺めてしまいます。
少しマニアックですが、色名を知るのも面白いですね!!

◆朱色 しゅいろ

 

硫化水鉄を原料とする鉱物顔料「銀朱」の色。現在の印鑑の朱肉の色。

◆バーミリオン

 

東洋と同様に西洋でも古くから硫化水銀の朱の原鉱と知られていた。人造朱は9世紀頃のアラビア錬金術師の発見といわれる。

◆珊瑚色 さんごいろ

 

さまざまな珊瑚色の中で西洋でも東洋でも装飾などで珍重されたのがピンク系。

◆茜色 あかねいろ

 

日本最古の植物染料の一つで、温帯アジア原生のアカネの根を原料とする濃い赤。

◆ワインレッド

 

赤ワインのような色を表す英語の色名。

◆紅梅色 こうばいいろ

 

紅梅の花のような色で平安時代、冬~春にかけての色として愛好された。

◆サーモンピンク

 

18世紀にできた英色名で「鮭の切り身」の色。

◆芥子色 からしいろ

 

カラシナの種子を粉にして練った練り芥子の色。英語では「マスタード」や「マスタードイエロー」と呼ぶ。

◆桜色 さくらいろ

 

山桜の花のような色で「紅染め」のなかで最も淡い色調。平安時代最も愛好された色名。

◆ボルドー

 

フランスの「ボルドー産赤ワイン」の英語の呼び方。19世紀には国際的に通用する色名に。

◆煉瓦色 れんがいろ

 

代表的な色は赤煉瓦の色で英語のブリックレッドにあたる。

◆ピーチ

 

16世紀の終わり頃から用いられた色名で英語の「ピーチ」、仏語の「ペルシャ」はどちらも「桃の果実の色」

Photoshopで共通パーツをリンク配置する方法

こんにちは。
すっかり暖かくなりましたね。
ぬこ飼いデザイナー佐竹です。

今日は、Photoshopでパーツごとにファイルを分けて、リンク配置する方法をご紹介します。(ccからの新機能です!)
Fireworksで言うところの「ページ」機能のようなもので、全ページ共通項目を別の1つのファイルで管理してリンク出来る便利な機能です。

それでは、早速操作方法です。

リンク配置用のファイルを作成

デザインカンプのヘッダー部分をグループ化して、「header」などの任意の名前を付けます。
そのグループレイヤーを選択して、右クリック→「グループを複製」でドキュメントの「新規」を選択します。
作成した新しいファイルに「header.psd」などの任意の名前を付けて保存します。

リンクを配置

挿入したいファイルのメニューから「ファイル」→「リンクを配置」を選択

×マークがついた部分がheaderです。

リンクされたスマートオブジェクトとして配置されました。

リンク先データに自動で反映

リンク元のデータを変更すると、リンク先データに自動で反映されます。
タイトル文字の色を茶色に変更したところ、リンク配置先も茶色に代わりました。


↓ ↓

空白のレイヤーをサクッと削除する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
花粉シーズンも折り返しですね。
毎年この時期、子供と某マラソン大会のファンラン(1Km)に参加して、マスクをして走り、窒息寸前になってヒイヒイでゴールするのですが、今年は花粉がすごいので、マラソンはさすがに諦めました~。

さて、今日はPhotoshopの地味な機能を2つほどご紹介します。
一通りデザインカンプが整ってきて、レイヤーを整理しようと思ったときにバババッと使える便利な機能です。

Photoshopで空白のレイヤーを削除する方法

「ファイル」メニューの「スクリプト」→「すべての空白レイヤーを削除」

Photoshopでレイヤーの位置だけを固定する方法

レイヤーパネルの「ロックボタン」左側の十字のボタンをクリックします。
位置だけ固定した状態でマスクや効果をつけることができ、とても便利です。

いかがだったでしょうか。
空白のレイヤーは、私のように性格上気になって気になってしょうがないという方がいるのでは?と思います。
一発削除できたらスッキリしますよね!
レイヤーのロックは、動かさずにオブジェクトを編集出来て、かなり使える機能だと思います。
さっそく次の制作から使っていきたいと思っています。
これからもこのような便利機能をちょこちょことご紹介させていただきます♪

「トーンカーブ」で特定の個所のみの色調補正

こんにちは。
ぬこ飼いデザイナーの佐竹です。

娘がTVの影響で「カカリチョウ」を覚えました。
「シャチョウ」なら会社にいるよ。お母さんは「ヒラ」だよ。
と教えたらたいそう喜んでいましたよ。
しばらく会社ごっこが続きそうな予感です・・・

さて、今日は「トーンカーブ」の新機能(cs6以降)について簡単にご紹介します。

「トーンカーブ」機能は、ざっくり言うと線を上にカーブさせると画像が明るくなって、下にカーブさせると暗くなく機能です。
「明るさ・コントラスト」などの補正よりも自由度が高いです。
ざっくりすぎてすみませんっ!

今回は、特定の個所のみの色調補正をする方法です。
今までは特定の個所を補正するにはマスクする必要があったのですが、簡単に出来るようになりましたよ~!
それでは、操作方法です。

(1)「トーンカーブ」を選択

「レイヤー」→「新規調整レイヤー」→「トーンカーブ」を選択します。
「属性」パネルに「トーンカーブ」が表示されます。

(2)ターゲット調整ツールを選択

「トーンカーブ」パネルの左上の「ターゲット調整ツール」をクリックしてオンにします。

(3)明るくしたいポイントを選択

今回はイチゴの断面だけを少し明るくします。
断面の一番明るい箇所を「ターゲット調整ツール」でポイントします。
続けて断面の一番暗い箇所をポイントします。
「トーンカーブ」パネルのポイント2点の間(四角く囲った部分)が明るくしたい色の範囲になります。

(4)ググっとカーブを調整

ポイント①~②の間の個所をマウスで選択して、「エイッ」と上に持ち上げます。

これで断面部分が明るくなりました。

いかがだったでしょうか?少しおいしそうになりましたでしょうか(^^)
ちょっと変化が分かりにくかったかもしれませんが・・・
いろいろ試しながらリアルタイムで確認ができますので、エイエイッと試してみてください!

焦点領域選択でサクッと選択範囲

こんにちは。
ぬこ飼いデザイナーの佐竹です。
今年は花粉が多いですね~。
思い切ってゴーグルを買おうかと思い詰める今日この頃です。
その前に耳鼻科へ行こうよって話ですが・・・

さて、今日はPhotoshopCCの新機能を一つご紹介します。

画像の中で、ピントの合った部分だけ素早く選択する方法です。

従来のやり方では「自動選択ツール」で範囲選択していましたが、「焦点領域」という機能を使うと時間短縮が出来、後から細かく修正することも可能ですよ~。
それでは、操作方法です。

(1)「選択範囲」メニューから「焦点領域」を選択

「焦点範囲」で数値を変更しながら焦点範囲を調整する。
大まかな選択が出来たところで「OK」をクリック。

(2)選択範囲の調整

「選択範囲」メニューから「選択範囲を保存」を選択。
アルファチャンネルに保存されます。
「チャンネル」パネルから保存したアルファチャンネルを選択し、範囲を微調整します。
微調整ができたら、「チャンネルを選択範囲として読み込む」をクリックして選択範囲を追加保存します。

「レイヤー」パネルに戻ってマスクを追加したり、色調補正をします。

いかがだったでしょうか。
焦点の合っている部分があって、そこだけを色調補正・抜き出し等したい場合にとても便利ですね!

Googleアナリティクスのコンバージョン設定方法

こんにちは。まだまだ寒い日が続いていますね。ぬこ飼いデザイナーの佐竹です。

Googleアナリティクスには、お問い合わせや資料請求など、「サイトの目標」に対して、データを取得する「コンバージョン設定」という便利な機能があります。
平たく言うと、〇〇のページを閲覧したら(ページに到達したら)1カウント~として到達数、到達率を取得できる仕組みです。

Googleアナリティクスで設定可能なコンバージョンは、4タイプあります。

1、目標URL
2、訪問の滞在時間
3、ページ/スクリーンビュー数
4、イベント(サイト内での行動)

今回はこのうちの「目標URL」設定についてご紹介します。
設定の前に、お問い合わせ完了ページ(フォーム送信後に表示されるページ)を作成しておいてくださいね。このページのURLが「目標URL」になります。

1、Googleアナリティクスの「すべてのウェブサイトのデータ」メニューから【管理】を選択

2、アナリティクス設定の「目標」を選択

3、【+新しい目標】ボタンをクリック

4、【目標設定】で「テンプレート」ーお問い合わせを選択


※「テンプレート」を選択すると、標準的なビジネス目標を参考にできるため、具体的なコンバージョンを設定するのに便利です。

5、【目標の説明】で「目標の名前(リストに表示される名前)」「タイプ(到達ページ)」を設定

6、【目標の詳細】で[到達ページ]のURLを設定

7、[目標到達プロセス]を設定する

※必須ではありませんが、「完了までのステップ」として入力画面のURLを入力しておくと、離脱率も計測できます。

※Googleアナリティクスの「リアルタイム」-コンバージョンで、正しく設定されているか確認することが可能です。

Photoshopのスマートオブジェクトを使おう①

こんにちは。

昨日子供の作った紙でできたタンバリンを思いっきり踏んでしまい、どうごまかそうか悩み中の、ぬこ飼いデザイナー佐竹です。

今日はPhotoshopユーザーにはすでに常識になりつつある「スマートオブジェクト」について簡単にご紹介します。

取り込んだデータを、「やっぱりちょっと大きくしよう」と思うことってありますよね。

そのデータを、すでにいい感じに加工した後だった場合、また元画像を取り込んで処理しようと思いつつ、遠い目になる…Photoshopユーザーあるあるだったと思います。

既に配置済みの画像を大きくできないのはなぜか?と言いますと、取り込んだ画像が「ラスター形式」画像なのが理由になります。

デジカメで撮影した画像なども「ラスター形式」になります。
四角いドット(ピクセル)で作られたファイル形式なので、画像を縮小したときにドット数が減って、拡大しても元のドット数を再現できないのが原因なのです。

CS3からは、「スマートオブジェクト」登場によりそんなあるあるも過去のものとなりました。

スマートオブジェクトとは

スマートオブジェクトは、配置またはペーストされた画像を、元の画質を保持したまま編集や拡大・縮小、回転、ワープが可能な機能です。
ccの最新機能も含めて、このスマートオブジェクトについてあれこれ、ご紹介していきます。

—————

それでは、まず配置したい画像を
(1)、はじめからスマートオブジェクトとして配置
(2)、配置後にスマートオブジェクト化したいとき

この二通りの操作をご説明します。

(1)はじめからスマートオブジェクトとして配置

1、「ファイル」メニューから「埋め込みを配置」を選択
図のようにレイヤーにアイコンが表示されればOK。

(2)配置後にレイヤーをスマートオブジェクト化したいとき

1、「レイヤー」パネルを開きます
2、スマートオブジェクト化したいレイヤーを右クリックして「スマートオブジェクトに変換」を選択(図参照)

※元データの容量が非常に大きい場合は、「これ以上大きくすることはない」というサイズまで縮小した時点でスマートオブジェクト化することでデータ容量をコンパクトにすることが出来、おすすめです。