【長いWebページでもキレイに印刷!】Adobe Acrobatで縦長の画像を横に並べて印刷する方法

ディレクターにチェックしてもらうとき、クライアントとの打ち合わせのとき、Webサイトの文字校正…など
モニターごしで見るWebデザインでも、紙に印刷してチェックを行う機会って結構多いものです。

ただ、Webページのデザインって大体縦に長いんですよね。ランディングページなどの1ページ完結型のサイトになると、それはもう、もう!ひたすら長い!

それをA4やA3用紙1枚に全体を収めようとすると、文字も読めないくらいに小さく、左右の余白もたくさん出てしまって…ちょっと残念な仕上がりになってしまいます。

こんなイメージ。なんとか収まっている…というような状態です。

今回はPDFの閲覧・編集に便利なAdobe Acrobatを使い、縦に長い画像を見やすいサイズに分割し、横に並べて印刷する方法をご紹介します。

A4用紙にこんな感じに並べて印刷していきます。

※Mac El Capitan/Adobe Acrobat Proでの出力手順です。

データの準備

AIデータ、PSDの場合は、jpg、pngなどAcrobatで扱える画像形式で書き出します。

Acrobatでの設定

データを開く

Acrobatで印刷したいデータをドラッグ&ドロップで開きます。

複数データをまとめて入れると、このようなモーダルウィンドウが開きます。

 

↓のように複数ページを続けて印刷したい場合「はい」をクリックし、この段階でデータをひとつのPDFに統合しましょう。

※あらかじめIllustratorやPhotoshopで、ひとつのPDFに書き出しておいてもOKです。

 

また、↓のように、データをそれぞれ別ページで印刷したい場合は「いいえ」をクリックし、個別のPDFとして印刷をしていきます。

プリント設定

⌘+Pまたはメニューバーのファイル→プリントからプリント設定を開きます。

 

「ページ設定」をクリックし用紙サイズを設定します。

 

次に「ページサイズ処理」「ポスター」を選択します。

 

今回は2分割したものを横に並べたいので、プレビューを参考に、2枚に収まる倍率を設定します。

境界で印刷されない部分が出るのを想定して、「重なり」も若干つけときましょう。
今回のデータでは倍率:35%/重なり:10mmで設定しました。

※複数ページ印刷する場合は、他ページのプレビューも合わせて確認しましょう。


!注意!

倍率によっては、このようにプレビュー上で、用紙の向きが横方向になる場合があります。

 

このまま印刷すると、このように印刷されてしまいます。

 

イメージ通りのレイアウトになるように、プレビューは印刷前に再度確認しましょう。


「プリンター」をクリックし「レイアウト」をタブから選択。
ページ数を「2」にし、横方向に並べます。

 

「レイアウト方向」ではページの順番を変更できます。
左右を入れ替えるときはこちらで設定しましょう。

「プリント設定」にもどり「印刷」をクリックしたら、完了です!

こちらも便利

ブラウザ上で分割印刷できるWebサービスもあるようです。ツールを介せずサクッとできるのがいいですね!
モバイルデザインの印刷の場合は、こちらもおすすめです。

縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」


PHP版 RSSリーダー(FC2用)

PHP版 RSSリーダー(FC2用)

どうもKazです。
とりあえず、BLOGを書きたい。そして連携したいと言うクライアント様には
PC表示時の広告表示が小さい FC2 BLOG をススメておりました。
そして、ホームページと連携する際はfeed2.jsを使ってRSSを表示しておりました。

さて、最近ではFC2 BLOGでもアイキャッチが設定できるという事で、RSSからアイキャッチを表示して見栄えのいい「最新情報」的な物が作れるかなと思ったら
RSSでもAromでも一切吐き出す気配がなく
FC2へ問い合わせたところ
『アイキャッチはRSSに出力されません』
と公式な回答を頂いてしましました…

『FC2ではアイキャッチ表示ができるのに、何で引用すると出ないんだ!?』
と言われる事もあると思うので
アチコチ見て参考にしながら、PHP版ですがFC2用のRSS表示する物を作ってみました。
(PHPは記事の最後にあります)

RSSリーダーのポイント

RSSの取得部分

クロスブラウザの件を解消する簡単な方法としては、PHPで取得するのが手っ取り早いようです。
JavaScriptに詳しいひとなら、この後をJavaScriptだけで書けるかもしれません。

日付などの整形部分

purl.orgリダイレクトサービスを利用して整形を行います

アイキャッチとして使う画像

記事の一番初めに使われている拡大表示可能なが画像をアイキャッチとして取得します。

記事中の<a>タグで囲まれている<img>タグをかき集めて、一番初めの物を最終的に取得しています。

この一連の作業を指定回数回して、リストとして出力する事でアイキャッチ付きのRSSを表示できます。

RSSリーダー PHP版(FC2用) DL fc2rss.php※写真がない場合の画像は、同一ディレクトリ内に「img」フォルダを作ってファイル名を「noimage.jpg」として画像を入れてください。

カスタマイズする事でイロイロと使えると思いますので、試して見てください。


制作事例 塗鈑瓦屋(とばんがや)様

 

塗鈑瓦と書いて「とばんが」と読む『塗装屋』『鈑金屋』『瓦屋』一緒になった新しい業態の店舗です。
今まで「どこに相談・発注」をすれば良いか お客様で考えてご依頼をしていたと思いますが、塗鈑瓦(とばんが)屋では全て一緒になっていますので悩むことなくご相談いただけます。
お問い合わせフォームに写真を添付できますので、実際の写真を送って詳しく相談することができます。

公開 2017年5月12日
URL http://tobangaya.com/

●制作内容
•3業態が合わさった事での無駄の少ない金額・施工ができることをアピール。
•写真添付機能付きの問い合わせフォーム採用
•キャラクターにより親近感と興味を持っていただける。
•わかりやすい価格ページ。


Macの立ち上げ時、Evernoteアプリを自動起動させないようにする方法

 

ノートアプリとして定番の「Evernote(エバーノート)」。ビジネスではもちろん、プライベートでも活用されている方はたくさんいらっしゃるかと思います。

ブラウザ版の他に、Macにインストールできるアプリ版もあるのですが、このEvernoteアプリの初期設定では、Macのシステム起動時に自動的にアプリが立ち上がるようになっています。

個人的に使用頻度が高いのはブラウザ版の方。アプリ版はネット環境に不具合があったときの予備程度のものだったので、起動のたびに立ち上がってしまうのは結構煩わしい。。
なので自動起動をオフにしようと試みてはみたものの、なかなか長いこと解決策が見当たらなかったのです。

今回その悩んでたものが解消されたので、小ネタではありますが記事にしてみました。

設定箇所は「Evernote」と「システム環境」の2つ。
詳しい手順(とはいっても、簡単な方法なのですが。。)は以下からどうぞ。

※以下は2017/5/10現在の情報です。

1 Evernoteアプリの設定

まずはEvernoteアプリからの設定です。

Evernoteのメニューバーの「Evernote」から「環境設定」を選択します。

「環境設定」の「全般」から「コンピューターにログインした時にEvernoteを起動」のチェックを外します。

これでEvernoteでの設定は完了です。

2 システム環境の設定

デスクトップのメニューバーの「アップルメニュー」から「システム環境」を選択します。

「システム環境」内の「ユーザーとグループ」を選択します。

「ログイン項目」のタブをクリックし、一覧の中から「Evernote」を選択した状態で下の「-」ボタンをクリックして完了です。

終わりに

アプリの自動起動の設定は、通常「システム環境」からだけでできるものがほとんどなのですが、Evernoteはアプリ自体に設定項目があるため2箇所の設定の見直しが必要です。どちらかがオンになっていると、自動起動はオフにはなりません。

設定自体は簡単ですが、私自身それに長らく気づかず、なぜだろう?と首をひねっていました。。

同じようにお悩みの方は、ぜひおためしください。


男性の顔を女性に変えてみる(2/2)

 

どうもKazです。
先回までは「美肌」を中心に加工してきましたが
今回は、もっと女子力を上げるために「メイク」まで行っていきます!!では続きをどうぞ!!
続きを読む 男性の顔を女性に変えてみる(2/2)

男性の顔を女性に変えてみる(1/2)

 

どうもKazです。
イロイロとバタバタしておりまして、しばらくコチラに記事が書けない状態だったのですが
やっと準備が整いましたので久々に書いていこうと思います。私が記事を書けずにいた頃、Twitterでは「Photoshopを使って男性を女性に加工する」と言ったツイートを多く見かけました。
早速、見に行くと確かに女性っぽくなってはいましたが、ベースの男性の顔が若干女顔に感じられました。
そこで…
「そんな事思うんだったらメッチャおじさまの画像から女性の顔にしてみろ!!」
と約1名…ワタクシから言われましたので加工をしてみました。

少し長くなりそうなので、数回に分かれるかと思いますが
お付き合いください。

続きを読む 男性の顔を女性に変えてみる(1/2)


サイトのイメージを上手に盛り上げる!キャラクターが主役のWebデザイン9選

 

固い業種のイメージをやわらげたり
特色や個性をより強調したり
意外な組み合わせでインパクトを出したり…と
イメージの印象付けに効果的なイメージキャラクター。

そんなキャラクターをうまい具合に取り入れている、9つのWebサイトをチェックしてみました。

※2017/03/31のサイトの情報です。

続きを読む サイトのイメージを上手に盛り上げる!キャラクターが主役のWebデザイン9選


とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】

今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り

ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加

ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み

これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除

逆に親テーマのCSSで不要なCSSを読み込みたくない時に。
$handle探すのに手間取ったりもしますが。。

ダッシュボード関連

自動で入力されるPタグを入れない。

記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加

追加したら利用したい場所に

投稿の画像相対パスを絶対パスに書き換え

ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。
パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード

これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。
自分ではあんまりショートコードは使わないんですけど。
いろいろな人が使う場合はあると重宝することがあります。

小ネタ

Advanced Custom Fieldsで画像のパスを取得(ID利用)

基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。
画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想

簡単なものばかりですけど。
最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。
固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


Illustratorで手描き風【水彩画風の塗り】

170131_06

 

ブラシを使用した線を使った手描き風の表現「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。

170131_13

とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。

なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様こちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。

続きを読む Illustratorで手描き風【水彩画風の塗り】


WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ ※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。

これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-[ポスト名]」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_[英数字]」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目 「acf-field-[フィールド名]」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!